这里要注意的关键是页脚的高度不会是固定的，但会随内容而变化。
当我说“粘脚”，我使用它在我所理解的是一个页脚，从不高于视口的底部，但如果有足够的内容，它将被隐藏，直到用户滚动的常见定义下来足够看到它。
解决方法
所有其他解决方案都是过时的，使用JavaScript或表的黑客。
随着@L_301_0@的出现，解决可变高度粘性页脚问题变得非常，非常容易：虽然大多数已知的布局内容在水平方向，FlexBox实际上也工作，以及对垂直布局问题。所有你需要做的是将垂直部分包装在Flex容器中，并选择要扩展的部分。它们会自动占用容器中的所有可用空间。
注意标记和CSS有多么简单。没有表黑客或任何东西。
flex模型是supported by all major browsers以及据称IE11，虽然我的IE没有正确呈现这个代码段。
html,body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexBox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
