Set the CSS height property for the HTML and BODY tags in your document to 100%. If you don't understand or want clarification, read below.
I have seen literally hundreds of posts where someone asked this (not on this site). I did not know myself, and had no need to, until yesterday. I discovered that the solution is very simple.
When writing XHTML (or XML for that matter) with CSS, a standards-compliant browser counts the <HTML> and <BODY> tags as containing tags for your block-level elements.
Since the CSS value for the HTML and BODY tags defaults to auto, the HTML and BODY tags will only stretch as far as they need to on the page.
That means that whenever you have a block-level element's height set to 100% and it is within the HTML and BODY tags, it will stretch to 100% of the height of those tags. So it could be half way down the page if there isn't a lot of content.
That means that we have to stretch the HTML and BODY tags to 100% of our document. So all we have to do is add this to our page or stylesheet:
html, body {
height : 100%;
}Too simplistic, see <!-- m --><a class="postlink" href="http://www.quirksmode.org/css/100percheight.html">http://www.quirksmode.org/css/100percheight.html</a><!-- m -->
BTY The question is asked every week on the forum
In other words it's an evil hack.
I have seen literally hundreds of posts where someone asked this (not on this site). I did not know myself, and had no need to, until yesterday. I discovered that the solution is very simple.
When writing XHTML (or XML for that matter) with CSS, a standards-compliant browser counts the <HTML> and <BODY> tags as containing tags for your block-level elements.
Since the CSS value for the HTML and BODY tags defaults to auto, the HTML and BODY tags will only stretch as far as they need to on the page.
That means that whenever you have a block-level element's height set to 100% and it is within the HTML and BODY tags, it will stretch to 100% of the height of those tags. So it could be half way down the page if there isn't a lot of content.
That means that we have to stretch the HTML and BODY tags to 100% of our document. So all we have to do is add this to our page or stylesheet:
html, body {
height : 100%;
}Too simplistic, see <!-- m --><a class="postlink" href="http://www.quirksmode.org/css/100percheight.html">http://www.quirksmode.org/css/100percheight.html</a><!-- m -->
BTY The question is asked every week on the forum
In other words it's an evil hack.