粘性页脚棒，但内容不会

Question

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

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

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

Answer 1

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

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

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

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

Answer 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! */
}