homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
body 100% height
Why?
jetboy




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

Seemingly a lot of you are using variations on:

html, body {
height: 100%;
}

in your stylesheets. What does this achieve?

 

createErrorMsg




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

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

jetboy




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

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?

createErrorMsg




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved