为什么这个 CSS 示例使用“height: 1%”和“overflow: auto”？答案

【问题标题】：Why does this CSS example use "height: 1%" with "overflow: auto"?为什么这个 CSS 示例使用“height: 1%”和“overflow: auto”？
【发布时间】：2011-02-17 06:34:06
【问题描述】：

我正在阅读一本 HTML 和 CSS 书籍。它有一个两列布局的示例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style>
        #main {height: 1%; overflow: auto;}
        #main, #header, #footer {width: 768px; margin: auto;}
        #bodycopy { float: right; width: 598px; }
        #sidebar {margin-right: 608px; }
        #footer {clear: both; }
    </style>
</head>
<body>
    <div id="header" style='background-color: #AAAAAA'>This is the header.</div>
    <div id="main" style='background-color: #EEEEEE'>
        <div id="bodycopy" style='background-color: #BBBBBB'>
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
        </div>
        <div id="sidebar" style='background-color: #CCCCCC'>
            This is the sidebar.
        </div>
    </div>
    <div id="footer" style='background-color: #DDDDDD'>This is the footer.</div>
</body>
</html>

作者提到使用溢出自动和 1% 高度将使主要区域扩大到包含计算的内容高度。我尝试删除 1% 的高度并在不同的浏览器中尝试，但它们没有显示出差异。我对它的使用感到很困惑。有什么想法吗？

【问题讨论】：

标签： css height overflow two-column-layout

【解决方案1】：

这与 IE6/7 中出现的 hasLayout 错误有关。 height: 1% 是常见的修复程序之一。其他的是 zoom: 1;（在 CSS 中无效）和 overflow: auto;。

因此，如果您删除 both height: 1%; 和 overflow: auto;，则 IE6/7 可能会遇到 hasLayout 错误。您是否会看到差异取决于模板的未来发展。

【讨论】：

溢出不会在IE6中触发hasLayout，仅在IE7中。（而且我认为 IE6 中甚至不存在缩放。）因此删除高度声明可能会产生影响。（当然，溢出的效果与 hasLayout 无关。）
@Tgr: overflow 确实只是 IE7 并且确实有其他副作用。 zoom 但在 IE6 中有效。更重要的是，它是在 IE 5.5 中引入的。

【解决方案2】：

您可以从article on quirksmode here 中详细了解每个部分的工作原理。至于 height 具体来说，这是它列出的原因，虽然我没有 Opera 来测试（并且它没有给出具体的版本）：

需要使用width 或height 声明才能使效果在资源管理器Windows 和Opera 中工作。如果不包括它，资源管理器 Windows 将继续在列顶部显示边框，就好像没有溢出一样。 Opera 完全隐藏了容器的内容。

【讨论】：