突然发现自己写的hexo模板有点问题，当页面主体高度不够的时候，footer页脚也跟着往上移，不在整个页面的底部了，很不协调，看着也不舒服。于是问题就来了，如何解决。

在footer使用负的margin-top

思路：将页面主体部分的min-height设为100%，于是页面就可以充满整个浏览器窗口了，footer就不会低于页面高度了，然后footer部分再使用负的margin-top来使footer往上移，这样就刚好置于页面底部。但这时候需要一个空的标签来保持主体部分距离底部的高度等于footer高度，防止文字覆盖在footer上面。

<body>
    <div class="content">
         主体正文
        <div class="fix"></div>
    </div>
    <footer class="footer">
        底栏固定
    </footer>
    </body>
</body>

html, body, div, footer {margin:  0;padding: 0;}
html, body {
    height: 100%;
}
.content {
    min-height: 100%;
}
.fix {
    height: 100px;
}
.footer {
    margin-top: -100px;
    height: 100px;
    color: #fff;
    background-color: #313131;
}

缺点：多了个辅助用的空标签，有种hack的感觉

在页面主体部分使用负的margin-bottom

实现思路和上面的方法类似，html结构同上，缺点也是需要一个空标签。

html, body {
    height: 100%;
}
.content {
    min-height: 100%;
    margin-bottom: -100px;
}
.footer,
.fix {
    height: 100px;
}

思路：body的min-height设为100%，并相对定位，然后footer用绝对定位固定在底部，主体部分用与footer相等高度的padding-bottom来控制底部距离。

<body>
    <div class="content">页面主体</div>
    <footer class="footer">底栏固定</footer>
</body>

html {
    height: 100%;
}
body {
    min-height: 100%;
    position: relative;
}
.content {
    padding-bottom: 100px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
}

通过计算属性来计算页面主体高度

看到有文章写用Javascript来解决，我感觉不太好，但用上同样的道理，css3的calc()也可以解决，虽然说兼容性差了点。
思路：footer高度固定，通过计算控制页面主体部分的高度，1vh等于视口高度的1%

<body>
    <div class="content">页面主体</div>
    <footer class="footer">页面底栏</footer>
</body>

html, body {
    height: 100%;
}
.content {
    min-height: calc(100vh - 100px);
}
.footer {
    height: 100px;
}

缺点：兼容性差

flexbox

在这篇文章 Sticky Footer, Five Ways 中看到还有两种比较新鲜的实现方式，采用flex和CSS Grid。

flex的方法是这样的，因为flexbox元素可以在容器中填充满，因此只要将body变成flex布局，然后控制body的min-height为100%就行了，页面主体部分是flex元素就会自动伸缩了。

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

html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

CSS Grid比较新，个人还没了解过，就不细说了。CSS Grid最近很热的感觉，可能又将是以后的趋势，现在能够支持的浏览器很少。
CSS 真是越来越灵活了，解决方案也越来越多。

看到Sticky Footer, Five Ways 这篇文章评论下大家还提出更多的解决方案。另外的方法还有display:table等，文章很不错，推荐阅读，感谢文章作者。