保持底部可变高度的页脚

Question

我需要在底部保持一个页脚,但它的高度是可变的,所以主要的解决方案不适合我...

我不能做的例子:http : //www.cssstickyfooter.com/ http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

任何人都有灵活的页脚解决方案？谢谢

Answer 1

2014更新:解决此布局问题的现代方法是使用flexboxCSS模型.它受到所有主流浏览器和IE11 +的支持.

这里是使用divs 的灵活高度粘性页脚的解决方案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显示:表属性非常有效,并且在所有主流浏览器中都受支持.这与使用结构表进行布局不同.