粘性页脚粘，但内容不会

Question

我有一个有效的粘性页脚，但我正在使用平铺的背景图像和内部的#content div。我遇到的问题是#content不会扩展以填充容器的高度。我在http://jsfiddle.net/mpRUT/1/有一个演示，在那里我改变了颜色来说明。当页面为空时，唯一能阻止#content折叠为遗忘的是设置min-height。

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

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

看到

Answer 1

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

我的老回答：

编辑样本（作为fork）： 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 {{1}}（like this）上使用最小高度来完成这项工作。