网页布局—StickyFooter

网页布局中经常会遇到这种问题，那就是我们的网页

footer

并不能呢一直停留在网页的底部。我们一般的惯用方法就是将网页的

footer

固定定位。但是如果我们将

footer

固定定位后，我们的网页内容多，一屏显示不出来时，我们的

footer

仍在窗口的底部，并且遮挡我们的内容，那么我们今天的这种布局方式，就是来解决这个问题的。

html代码：

<div class="container">
页面主体内容...
</div>
<footer>
footer
</footer>

css代码：

* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
margin-bottom: -142px;
}
.container::after {
content: "";
display: block;
height: 142px;
}
footer {
background: rgb(207, 89, 89);
height: 142px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 142px;
}

实现效果：

当页面主体内容不能撑满一整个屏幕时，

footer

将会被固定在屏幕底部，底部的高度固定；

当页面主体内容能够撑满一整个屏幕时，

footer

将会移动，在页面的底部；

实现原理：

将页面主体内容的底部界限向上提升

xxpx

，为页面主体内容添加一个伪元素，与

footer

的高度一样全部为

xxpx

，当主体内容撑满一屏幕时，伪元素与

footer

重合。

完整demo地址