Why does this CSS example use "height: 1%" with "overflow: auto"?_问答_开发者

Why does this CSS example use "height: 1%" with "overflow: auto"?

开发者 https://www.devze.com 2022-12-30 03:32 出处：网络

I am reading a HTML and CSS book. It has a sample code of two-column layout. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

I am reading a HTML and CSS book. It has a sample code of two-column layout.

<!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.<b开发者_Python百科r />
            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>

The author mentions that the use of overflow auto and 1% height will make the main area expand to encompass the computed height of content. I try to remove the 1% height and tried in different browsers but they don't show a difference. I am quite confused of its use. Any idea?

This is related to the hasLayout bug which manifests in IE6/7. The height: 1% is one of the common fixes. The other ones being zoom: 1; (which doesn't validate in CSS) and overflow: auto;.

Thus, if you remove both height: 1%; and overflow: auto; then IE6/7 may suffer from the hasLayout bug. Whether you would see difference or not depends on the future development on the template.

You an read a bit more on the reasoning on how each part works from the article on quirksmode here. As for the height specifically, here's the reasoning it lists, though I don't have Opera to test (and it doesn't give specific versions):

The use of a width or height declaration is required to make the effect work in Explorer Windows and Opera. If you don't include it Explorer Windows continues to show the border at the top of the columns, as if there were no overflow. Opera completely hides the content of the container.