在底部保持可变高度的页脚 [英] Keep footer with variable height on bottom

问题描述

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

I need to keep a footer on bottom, but its height is variable so main solutions are not suitable for me...

不能执行：
http://www.cssstickyfooter.com/
http： //matthewjamestaylor.com/blog/bottom-footer-demo.htm

examples of what I can't do: http://www.cssstickyfooter.com/ http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

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

Anyone have a solution for flexible footers? Thanks

推荐答案

2014 UPDATE ：解决这个布局问题的现代方法是使用 flexbox CSS模型。

2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.

这是一个适用于灵活高度的粘性页脚的解决方案，使用 div s与 display：table-row ：

Here's a solution for sticky footer of flexible height using divs with 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显示：表格属性非常有效，并且在所有主要浏览器中受支持。这与使用结构表进行布局不同。

What needs to be noted is that CSS was designed to layout documents, not web application screens. The CSS display: table properties are very valid though, and are supported in all major browsers. This is not the same as using structural tables for layout.

这篇关于在底部保持可变高度的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！