随着CSS flex model的出现，解决可变高度粘性页脚问题变得非常，非常容易：虽然大多数已知的布局内容在水平方向，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>