CSS StickyFooter——当内容不足一屏时footer紧贴底部

IMWeb前端团队

发布于 2019-12-03 17:17:41

1.2K0

发布于 2019-12-03 17:17:41

文章被收录于专栏：IMWeb前端团队

本文作者：IMWeb 结一原文出处：IMWeb社区 未经同意，禁止转载

一般来说我们的footer是跟着内容走的，所以当内容较少不足一屏的时候，footer也会跟着内容往上走，导致下面一段空白。所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部的情况，因为比较难以描述，所以干脆使用了英文标题，要实现的效果如下：

第一个和第三个为正常不处理的情况，第二个和第三个是我们要实现的情况

以前因为要兼容ie7-，所以对结构比较有要求，实现起来也比较复杂。这里我们先讨论下ie8+的情况，然后在来讨论下更高级的flex实现。

ie8+

实现思路为：设置body最小高度为100%，相对定位，然后空出底部的高度，关键是要设置盒模型box-sizing为border-box或padding-box，最后将footer绝对定位在底部即可。

html代码如下：

<body>
    ...
    <div class="footer"></div>
</body>

css代码如下：

html{
    height: 100%;
}
body{
    min-height: 100%; /* 设置最小高度100% */
    position: relative; /* 设置最小高度100% */
    box-sizing: border-box; /* 设置盒模型为border-box，那样这个100%包括了下面的padding-bottom高度 */
    padding-bottom: 120px; /* 高度为footer的高度 */
}
.footer{
    position: absolute; /* 将footer绝对定位在底部 */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
}

flex

flex实现其实比上面的要求更严格，上面的几乎对结构没要求，而flex则对footer的兄弟元素是有要求的。

主要思路是设置flex的方向为垂直方向，然后设置内容占满其余的空间

html代码如下：

<body>
    <div class="header"></div>
    <div class="container"></div>
    <div class="footer"></div>
</body>

css代码如下：

html{
    height: 100%;
}
body{
    min-height: 100%;
    display: flex; /* 设置flex */
    flex-direction: column; /* 方向为垂直方向 */
}
.container{
    flex: 1; /* 内容占满所有剩余空间 */
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-04-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html