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

views:

100

answers:

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

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"&gt;
<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>

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?

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.

Nick Craver 2010-05-08 23:56:04

+1 A:

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.

BalusC 2010-05-09 00:00:05

Overflow does not trigger hasLayout in IE6, only in IE7. (And I don't think zoom even exists in IE6.) So removing the height declaration might have an effect. (And overflow, of course, has an effect independently of hasLayout.)

Tgr 2010-05-09 00:20:59

@Tgr: `overflow` is indeed IE7 only and has indeed other side-effects. The `zoom` however works in IE6. Even more, it was introduced in IE 5.5.

BalusC 2010-05-09 00:51:08

ansaurus

tags:

views:

answers:

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

related questions