Forum Moderators: not2easy
html, body {
height: 100%;
}
in your stylesheets. What does this achieve?
In IE without a doctype (Quirks Mode), the body is considered to take it's height relative to the viewport, so setting body to 100% height makes it as tall as the viewport and a nested wrapper div can then be set to 100% height of that resulting in a layout that stretches to fit the whole screen.
The same code, however, doesn't do the trick for Firefox and other compliant browsers functioning in Standards Mode. In those, the body takes it's height relative to the <html> tag, which then takes it's height relative to the viewport. So just body{height:100%;} doesn't allow a nested wrapper div to stretch the full height of the screen. You have to move one more level up the document tree in order to tie the height to the viewport size. Html, body{height:100%;} does this, resulting in a wrapper div that is 100% of the body, which is 100% of the html, which is 100% of the viewport.
Quirksmode has a page ("100% Height") with a far more lucid explanation.
cEM
So if the content is taller the the viewport, in Firefox the content (correctly) pokes out the bottom of the 100% high wrapper, while IE auto-contains it ...
Am I right in saying that this is only practical if you can guarantee that your content won't overflow the viewport?
Am I right in saying that this is only practical if you can guarantee that your content won't overflow the viewport?
Yes, unless you slightly alter the technique to use and/or emulate min-height rather than height.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
html, body {height:100%;}
#wrapper{height:100%;background:#369;}
body>#wrapper{height:auto;min-height:100%;} /*child hack overrides height in compliant browsers and adds min-height, which they understand*/
</style>
</head>
<body>
<div id="wrapper">
<h1><a href="#">Lorem Ipsum Dolor</a></h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
cEM
