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

2023年4月13日 225次阅读

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

最佳答案 这与IE6 / 7中出现的
hasLayout错误有关.高度：1％是常见修复之一.其他的是缩放：1; (不在CSS中验证)和overflow：auto;.

因此,如果你删除两个高度：1％;和溢出：auto;然后IE6 / 7可能会受到hasLayout错误的影响.您是否会看到差异取决于模板的未来发展.

点赞