Why does this CSS example use "height: 1%" with "overflow: auto"?
- by Lawrence Lau
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.<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?
