Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: not2easy

body 100% height

Why?

   
1:36 pm on Sep 22, 2005 (gmt 0)

10+ Year Member



Seemingly a lot of you are using variations on:

html, body {
height: 100%;
}

in your stylesheets. What does this achieve?

2:49 pm on Sep 22, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's a cross-browser thing.

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

3:28 pm on Sep 22, 2005 (gmt 0)

10+ Year Member



Cool. Thanks 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?

6:32 pm on Sep 22, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month