Menu
I have a div called "content" which I wish to at least take up the entire height of a window.
So what I did was this:
body
{
min-height:100%;
height:auto !important;
/* The following probably aren't relevant but I'll include them 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%;
/* The following probably aren't relevant but I'll include them just in case */
clear: both;
color: #333;
padding: 10px 20px 40px 20px;
position:relative;
background:url(/img/strawberry.png) right bottom no-repeat;
}
Using firebug, I verified that indeed is now taking up the entire page (even when there's no content on the page. Just as I wanted)
However the problem is, content is not taking up the entire height of , but instead being only as large as its internal contents.
EDIT: Seems to work in chrome 7.0.517.41, but not in firefox 3.6.10 (problem seems to occur in all versions of firefox 3.6.x and probably previous versions as well).
785
I've already solved a similar problem with
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
It seems <html> is sometimes taken into account to calculate height.
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
