css – 底部可变高度的页脚

参见英文答案 > How can a variable-height sticky footer be defined in pure CSS?4个
我需要保持底部的底部,但其高度是可变的,所以主要的解决方案不适合我…

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

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

解决方法

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中得到支持.这与使用布局的结构表不同.

原文地址：https://www.jb51.cc/css/217062.html