网页布局—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地址