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).
This works for sure...
I've already solved a similar problem with
It seems
<html>
is sometimes taken into account to calculate height.You could try setting an explicit height as well as a min-height:
Don't know for sure if it'll work, but something inside says it might.
you don't need to use min-height on body. most of the time, you don't need to use it on child block either.
this little article explains it all: http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height