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

Posted 2023-03-06

【中文标题】保持底部可变高度的页脚[重复]

【英文标题】：Keep footer with variable height on bottom [duplicate]

【发布时间】：2012-02-25 23:02:51

【问题描述】：

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

我不能做的例子：

http://www.cssstickyfooter.com/ http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

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

【参考方案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%。