Question

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

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

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

Answer 1

2014年更新：解决此布局问题的现代方法是use the flexbox CSS model。它受到所有主流浏览器和IE11 +的支持。

这是使用div 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>

{{1}}

需要注意的是CSS设计用于布局文档，而不是Web应用程序屏幕。 CSS显示：表格属性非常有效，并且在all major browsers中受支持。这与使用结构表进行布局不同。

Answer 2

我想我明白你的意思。

你需要移除高度css并用填充顶部和衬垫底部替换它，如果你仍然是什么间距..

例如

#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   background: #6CF;
   padding-top: 20px;
   padding-bottom: 20px;
 }

Answer 3

#wrapper, #content, #footer {
  width:100%;
  height:100%;
  position: relative;
}


<div id="wrapper">
  <div id="content"></div>
  <div id="footer"></div>
</div>

保持底部可变高度的页脚

3 个答案: