css – 底部可变高度的页脚

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/217062.html

猜你在找的CSS相关文章