sticky-footer实现方式

最新推荐文章于 2023-02-13 20:45:00 发布

奔跑的前端er

最新推荐文章于 2023-02-13 20:45:00 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS知识理解

本文链接：https://blog.youkuaiyun.com/caoxinhui521/article/details/79659288

CSS知识理解专栏收录该内容

14 篇文章

订阅专栏

绝对底部，或者说 Sticky Footer，是一种古老且经典的页面效果：

当页面内容超出屏幕，页脚模块会像正常页面一样，被推到内容下方，需要拖动滚动条才能看到。

而当页面内容小于屏幕高度，页脚模块会固定在屏幕底部，就像是底边距为零的固定定位。

一、经典套路

这种套路的思路是，给内容区域设置 min-height: 100%，将 footer 推到屏幕下方

然后给 footer 添加 margin-top，其值为 footer 高度的负值，就能让 footer 回到屏幕底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LazyLoad</title>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        body>.wrap{
            min-height: 100%;
        }
        .content{
            padding-bottom: 60px;
        }
        .footer{
            width: 100%;
            height: 60px;
            margin-top: -60px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="content">
        <p>填充内容</p>
    </div>
</div>
<div class="footer">
    <p>这是页脚</p>
</div>
</body>
</html>

需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin，必须保持一致。

二、Flexbox
这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LazyLoad</title>
    <style type="text/css">
        html,body{
            height: 100%;
            display: flex;
            flex-direction:column;
        }
        body .content{
            flex:1;
        }
    </style>
</head>
<body>
<div class="content">
    <p>填充内容</p>
    <hr/>
</div>
<div class="footer">
    <p>这是页脚</p>
</div>
</body>
</html>