css – 底部可变高度的页脚

2014年更新：解决这个布局问题的现代方法是 use the flexbox CSS model.所有主流浏览器和IE11都支持.

这是一个使用带显示的div的灵活高度的粘性页脚的解决方案：table-row：

html,body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
  BACkground: yellow;
}
.content {
  display: table-row;
  /* height is dynamic,and will expand... */
  height: 100%;
  /* ...as content is added (won't scroll) */
  BACkground: turquoise;
}
.footer {
  display: table-row;
  BACkground: lightgray;
}

<div class="wrapper">
  <div class="content">
    <h2>Content</h2>
  </div>
  <div class="footer">
    <h3>Sticky footer</h3>
    <p>Footer of variable height</p>
  </div>
</div>

需要注意的是,CSS旨在布局文档,而不是Web应用程序屏幕. CSS显示：表属性虽然非常有效,但在all major browsers中得到支持.这与使用布局的结构表不同.