粘性页脚会粘住，但内容不会粘住

Question

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

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

效果可以在 http://myfitzeek.lime49.com/ 看到

Answer 1

IMO：如果没有最小高度，将无法 100% 工作。 （参见评论）

我的旧答案：

编辑样本（作为叉子）：
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! */
}

Answer 2

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

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

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

除了在页脚上执行 position:fixed; 以及在 #wrapper 上使用背景图像来提供全高内容的印象窗格，我不知道如何在不使用 #content 上的 min-height 的情况下完成这项工作（像这样）。