Clarification on Height

You are probably thinking of #wrapper {overflow:hidden; }.

If you set a height on a div, it is restricted to that height (except in old IE). But the content itself is not restricted to that height—which is why it’s usually a bad idea to set a height on anything on the web. If a user’s font sizes are set to something bigger than you expect, the text will spill out of the div in a very ugly way.

if you don’t set a height on body and html their “height” will be set to “auto”, or, “grow as tall as needed”. In that case when you give #wrapper a height of 100% you tell it to “be as high as itself” (indeed if you left out the “height” on that element your result would be exactly the same).

This method works if you have more content than the viewport, but once you have just a little content, #wrapper will only be as high as the content. and not stretch all the way down to the bottom of the viewport.

Regarding the height:100% on html and body then the height is treated much the same but as already mentioned the html and body are slightly special.

We set the body to height:100% and effectively that height is capped to 100% and doesn’t expand (much in the same way that an inner div wouldn’t expand if it was set to 100%).

Here’s an example.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
	margin:0;
	padding:0;
}
html { background:green }
body { background:red }
p { margin:0 0 5em }
</style>
</head>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>



In the above the html element is green and body is red. As soon as you go below the fold (i.e greater than 100%) you lose the red body colour and the green of the html takes over! Therefore we can deduce that the body is only 100% high and does not grow but that html is special and will still supply a background to the content below the fold. If we set html and body to 300px high the green background would still continue forever.

This often catches people out when they supply colours for both html and body and see the body stopping at the fold when 100% height is used.

That leads us to the question that if we remove the background colour from html why doesn’t the red background stop at the viewport bottom edges as before? We haven’t changed anything else but simply removed the green background:color.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
	margin:0;
	padding:0;
}
[B]html {}[/B]
body { background:red }
p { margin:0 0 5em }
</style>
</head>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>


The reason is that the body is special also and any background applied to the body element is automatically propagated to html as well (unless html has its own colour defined). So in our second example the body still stops at 100% high but then the html element takes over and supplies the red colour from there on even though we specified no colour for html.

How does this affect our 100% high layout?

As long as html has not been used for background colour or images then it has no real effect because our min-height:100% wrapper element simply overflows the body and continues down the page unabated. So the simple reply to your question is the the body is only 100% height but our inner element is allowed to overflow without consequence.

In answer to an earlier question you could theoretically use the body element as your page wrapper and supply it with min-height:100% but that would mean that the sticky footer would need to be outside of the body element which is not allowed so can’t take that approach.

Interesting demo!

Thanks as always, Paul! :tup:

Sincerely,

Debbie

Thanks Paul, I didn’t realise that was what was happening.