I created a div named "content" with the intention of it occupying the entire height of a window.
To achieve this, I added the following CSS:
body {
min-height: 100%;
height: auto !important;
/* Additional properties included just in case */
min-width: 600px;
color: #fff;
font-family: 'lucida grande', verdana, helvetica, arial, sans-serif;
font-size: 90%;
margin: 0;
}
div#content {
min-height: 100%;
/* Additional properties included just in case */
clear: both;
color: #333;
padding: 10px 20px 40px 20px;
position: relative;
background: url(/img/strawberry.png) right bottom no-repeat;
}
By using firebug, I confirmed that the content is occupying the entire page as desired, even when there is no content present.
However, the issue arises where the content's height is limited to its internal contents rather than filling the entire height of the page.
UPDATE: This appears to work correctly in Chrome 7.0.517.41, but not in Firefox 3.6.10 (the problem seems consistent across all versions of Firefox 3.6.x and possibly earlier versions).