CSS sticky footer布局

最新推荐文章于 2021-08-05 09:50:00 发布

田小思

最新推荐文章于 2021-08-05 09:50:00 发布

阅读量283

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/tian_123456789/article/details/81477895

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Sticky Footer布局：当页面中的内容高度小于屏幕高度的时候, 让底部footer显示在底部, 当内容高度大于屏幕高度的时候, 底部footer会紧随内容其后, 滚动内容区域，footer会在内容的最后方显示。

<!DOCTYPE html>
<html>
<head>
    <title>CSS Sticky footer</title>
    <style type="text/css">
        body{
            display: flex;
            flex-flow: column;
            min-height: 100vh;
            overflow: auto;
        }
        h1{
            font-size: 60px;
            text-align: center;
        }
        p{
            font-size: 24px;
            text-align: center;
        }
        .main{
            flex: 1
        }
    </style>
</head>
<body>
    <header>
        <h1>Site name</h1>
    </header>
    <div class="main">
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
    </div>
    <footer>
        <p>©️ 2018</p>
        <p>made whith XXXX</p>
    </footer>
</body>
</html>

利用定位和负margin的方法实现

<!DOCTYPE html>
<html>
<head>
    <title>CSS sticky footer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        /*实现css sticky footer布局的主要样式*/
        .detail{
            position: fixed;
            overflow: auto;
            width: 100%;
            height: 100%;
        }
        .wrapper{
            min-height: 100%;
            width: 100%;
        }
        .main{
            margin-top: 64px;
            padding-bottom: 44px; /* padding-bottom要和下面的footer的高度保持一致以保证footer能够显示出来 */
        }
        .footer{
            margin: -44px auto 0 auto;  /* margin-top 设置向上偏移，用来和main的padding-bottom相抵消保证main里面的内容不够占满全屏的时候让footer显示在页面的底部 */
        }
        .clearfix::after{
            display: block;
            height: 0;
            content: " ";
            clear: both;
            visibility: hidden;
        }
        /* 辅助样式 为了使页面美观一点，可以忽略 */
        .title h1{
            font-size: 60px;
            text-align: center;
        }
        .main p{
            font-size: 24px;
            text-align: center;
        }
        .footer p{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="detail">
        <div class="wrapper clearfix">
            <div class="title">
                <h1>Site name</h1>
            </div>
            <div class="main">
                <p>this is content about the site </p>
                <p>this is content about the site </p>
                <p>this is content about the site </p>
                <p>this is content about the site </p>
            </div>
        </div>
        <div class="footer">
            <p>©️ XXX</p>
            <p>made XXX</p>
        </div>
    </div>
</body>
</html>

这里写图片描述

田小思

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS sticky footer布局

Sticky Footer布局：当页面中的内容高度小于屏幕高度的时候, 让底部footer显示在底部, 当内容高度大于屏幕高度的时候, 底部footer会紧随内容其后, 滚动内容区域，footer会在内容的最后方显示。利用flex布局实现sticky footer布局&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt...
复制链接

扫一扫