粘性页脚棒，但内容不会

Posted 2023-03-06

【中文标题】粘性页脚棒，但内容不会

【英文标题】：Sticky footer sticks, but content won't

【发布时间】：2011-12-08 17:11:37

【问题描述】：

我有一个可以使用的粘性页脚，但我使用的是平铺背景图像和内部#content div。我遇到的问题是#content 不会扩展以填充容器的高度。我在http://jsfiddle.net/mpRUT/1/ 有一个演示，我在其中更改了颜色以进行说明。当页面为空时，唯一可以防止#content 崩溃到被遗忘的是在其上设置的min-height。

我可以让它扩展以填充容器，还是我只需要设置一个更大的最小高度并失去一些浏览器？

效果可见http://myfitzeek.lime49.com/

【问题讨论】：

对不起，我真的不明白你的问题，因为我没有看到页脚很粘。 - 我想你想用position: fixed; 定位页脚并纠正位置/边距；并将height 值设置为您的min-height 值。所以你不需要 min-height 属性。

我需要中间的内容部分（白色）向下延伸并覆盖蓝色。我遇到的问题是，在演示站点 (myfitzeek.lime49.com) 上，白色背景没有向下扩展以覆盖平铺的背景图像。

啊，现在下面的部分也是蓝色的。现在我明白了这个问题。谢谢。我会调查一下，看看我是否知道得更好:)

您可以在 #footer 上使用 padding-top: 200px（z-index 为 1，#content z-index 为 2）。它不优雅，但会达到你的视觉效果。

@mdi 当我在网站上使用 firebug 进行测试时，填充仍然与内容重叠（低 z-index 的页脚会剪切正确的内容 [#content with high z-index]）。

【参考方案1】：

您很有可能需要设置 min-height: 100%; 并使用负边距减去页脚高度。

#wrapper  margin-bottom: -60px; 
#footer   height: 60px; 

您的目标浏览器是什么？您对最小高度表达了一些担忧——为什么不设计页脚在折叠时看起来可以接受，以便它在旧浏览器中很好地降级？如果您在完成的设计中使用侧边栏，您可以使用.clearfix 技术将页脚强制到底部，这意味着它不一定很明显。

除了在页脚上使用position:fixed; 并在#wrapper 上使用背景图像来提供全高内容窗格的印象，我不知道有什么方法可以无需在#content (like this) 上使用 min-height 即可完成这项工作。

【讨论】：

减去页脚如何工作？我不知道该怎么做，因为 Echilon 混合了容器的绝对 (px) 和相对 (百分比) 大小。

啊，对不起，我措辞不好。 margin-bottom 需要等于页脚高度的负数。见this example。

【参考方案2】：

IMO：没有最小高度将无法 100% 工作。 （见 cmets）

我的旧答案：

编辑样本（作为分叉）： http://jsfiddle.net/4EtKh/1/

#wrapper: 
    /*min-height:100%;*/ /* remove! */
    position:relative;
    height:100%; /* new! */
    overflow: hidden; /* new! */


#content 
    text-align: left;
    line-height: 140%;
    background: #fff;
    font-size: 1.2em;
    /*min-height: 80px;*/ /* remove! */
    height: 100%; /* new! */

【讨论】：

我将页脚涂成红色，以在视觉上澄清元素。 - 我还在你的页面上用 firebug 测试了这个解决方案。它有效。

谢谢，但这个解决方案的问题是如果#content 的内容太多，我将无法滚动它。

哦，这真是太糟糕了。没想到溢出以这种方式工作。对不起。 如果不使用最小高度，恐怕我想不出任何其他解决方案，因为overflow: scroll; 不是任何人想要的。否则，当内容为空时，您的页脚将始终位于内容的底部，而不是页面的底部。

不过，这是一个很好的答案，感谢您的尝试。我不敢相信这有这么难，我一直在与页脚搏斗。