保持底部可变高度的页脚[重复]答案

【问题标题】：Keep footer with variable height on bottom [duplicate]保持底部可变高度的页脚[重复]
【发布时间】：2012-02-25 23:02:51
【问题描述】：

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

我不能做的例子：

谁有灵活页脚的解决方案？

【问题讨论】：

标签： css footer

【解决方案1】：

我想我明白你在做什么。

如果你还有什么间距，你需要删除高度 css 并用 padding-top 和 padding bottom 替换它..

例如

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

【讨论】：

【解决方案2】：

2014 年更新：解决此布局问题的现代方法是 use the flexbox CSS model。所有主流浏览器和 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 display: table 属性非常有效，并且在all major browsers 中受支持。这与使用 structural 表格进行布局不同。

【讨论】：

+1，这真的很酷。你知道这种方法有什么缺点吗？您认为它在移动设备上的表现如何？
这太棒了——谢谢！但是，它不太适合我的需要，因为它是用于可变高度的粘页脚和会滚动的内容区域。我发现我可以通过在内容上省略“display:table-row”并设置“overflow-y:scroll”来做到这一点。在页脚上，我将其更改为“display:table-footer-group”。这导致事情完全按预期工作！
您应该将table-layout: fixed; 添加到类包装器中。没有它，我在 IE 中遇到了一些宽度问题。无论最大宽度如何，内容都会溢出。
请注意：三星手机浏览器使用的是非常旧的 chrome 版本，并且使用 flexbox 下推页脚会导致页脚漂浮在屏幕中间（2017 年初）
table-layout: fixed; 还修复了 Firefox 53 的问题。

【解决方案3】：

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


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

【讨论】：

...不会创建可变高度的页脚，而是将其缩放到视口区域的 100%。