css 图片紧贴页面底部,CSS StickyFooter——当内容不足一屏时footer紧贴底部

本文作者：IMWeb 结一

未经同意，禁止转载

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

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

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

ie8+

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

html代码如下：

...

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代码如下：

css代码如下：

html{

height:100%;

}

body{

min-height:100%;

display:flex; /* 设置flex */

flex-direction:column; /* 方向为垂直方向 */

}

.container{

flex:1; /* 内容占满所有剩余空间 */

}