Question

我正在阅读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>

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

Answer 1

这与IE6 / 7中显示的hasLayout错误有关。 height: 1%是常见的修复方法之一。其他的是zoom: 1;（在CSS中未验证）和overflow: auto;。

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

Answer 2

您可以阅读有关每个部分如何使用article on quirksmode here的原因的更多信息。至于height具体来说，这是它列出的推理，虽然我没有Opera来测试（并且没有给出特定的版本）：

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

为什么这个CSS示例使用“height：1％”和“overflow：auto”？

2 个答案: