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