homepage Welcome to WebmasterWorld Guest from 54.211.68.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
body 100% height
Why?
jetboy

5+ Year Member



 
Msg#: 7559 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 7559 posted 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

5+ Year Member



 
Msg#: 7559 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 7559 posted 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