：解决此布局问题的现代方法是使用flexboxCSS模型。所有主流浏览器和IE11
+均支持该功能。

这是使用div带有的s 的灵活高度的粘性页脚的解决方案display: 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
display：table属性虽然非常有效，并且在所有主流浏览器中都受支持。这与使用
结构 表进行布局不同。