全高div不拉伸答案

【问题标题】：Full height div not stretching全高div不拉伸
【发布时间】：2011-06-04 15:32:20
【问题描述】：

您好，我已经在网站上工作了很长时间，改进代码等。我刚刚注意到，在较小的屏幕上，白色背景的高度不会超过所有内容。

设置min-height: 100%; 和height: 100%; 似乎无法解决问题，您认为这可能是因为很多内容都是浮动的吗？

任何建议将不胜感激。

【问题讨论】：

【解决方案1】：

您可以使用 inline-block 到 main div ，例如：-

div.container{
   display:inline-block;
}

【讨论】：

【解决方案2】：

从容器中删除“height: 100%”，从页脚中删除“float: left”，并在页脚中添加“clear:both”。这将清除容器中的所有浮动，并且无论浏览器大小如何，容器的背景颜色都将在页面下方一直可见。

【讨论】：

【解决方案3】：

在您的 div.container 上，删除 height: 100% 并添加 overflow: auto。

【讨论】：

几乎做到了，在您的建议中添加min-height: 100%; 后它起作用了！关于让min-height: 100%; 在 IE
@Wolfy87: min-height 不适用于 IEmin-height 应该工作的方式对待height，因此对于那些浏览器，您应该能够只使用height。但是，您需要进行一些浏览器检测和/或黑客攻击才能使其使用min-height 或height，具体取决于浏览器。鉴于 IE6 现在的市场份额不到 3%，可能不值得付出努力。
@Wolfy87：我在回答时没有考虑 IE6。如果您试图使该站点在 IE6 中运行，您可能需要检查this page，它看起来不正确。你确定你需要min-height:100%吗？该网站对我来说看起来不错。
我刚刚在 Adobe BrowserLab 上通过 IE 6 运行它，它看起来不错。所以，是的，我将第一次放弃 IE 6。
@thirtydot 如果您使用 firebug 并取出 min-height，您会看到页面紧贴到页脚，我需要它转到底部，而且该页面对我来说看起来不错?

【解决方案4】：

尝试把溢出：隐藏；在其余内容下要清除的容器上

【讨论】：

但是overflow: hidden; 会按照它在锡上说的做，隐藏溢出的内容。我需要它被这个内容推倒，我想更多的是沿着一个明确的修复路线，但我还没有设法让它工作。
overflow:hidden 也可用于清除内容 - 工作方式类似于 .container:after { clear:both } quirksmode.org/css/clearing.html
我明白了，谢谢你，尽管它现在正在工作，这真的很有帮助。