4

我正在阅读 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% 的高度并在不同的浏览器中尝试，但它们没有显示出差异。我对它的使用感到很困惑。任何想法？

4

2 回答 2

2

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

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

于 2010-05-09T00:00:05.910 回答
0

您可以从此处有关 quirksmode的文章中阅读更多关于每个部分如何工作的推理。至于height具体的，这里是它列出的原因，虽然我没有 Opera 来测试（并且它没有给出具体的版本）：

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

于 2010-05-08T23:56:04.967 回答