All geek questions in one place

Why is this CSS example using "height: 1%" with "overflow: auto"?

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

<!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 using automatic overflow and a height of 1% will expand the main area to cover the calculated content height. I am trying to remove a height of 1% and try in different browsers, but they do not show the difference. I am completely confused about its use. Any idea?

+4
source share
2 answers

This is due to the hasLayout error that appears in IE6 / 7. height: 1% is one of the common fixes. Others are zoom: 1; (which are not checked in CSS) and overflow: auto; .

Thus, if you remove and height: 1%; and overflow: auto; then IE6 / 7 may suffer from the hasLayout error. Regardless of whether you see the difference or not, it depends on the future development of the template.

+2
source

You read a little more about how each piece works from the quirksmode article here . As for height in particular, his reasoning is given here, although I do not have Opera for testing (and it does not give specific versions):

The use of a width or height declaration is required for the effect to work in Windows and Opera Explorer. If you do not enable it, Windows Explorer will continue to show the border at the top of the columns, as if there were no overflow. Opera completely hides the contents of the container.

0
source

Source: https://habr.com/ru/post/1309218/

More articles:


All Articles