min-height 100% doesnt work on inner div

问题

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).

回答1:

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.

回答2:

You could try setting an explicit height as well as a min-height:

min-height:100%;
height:100%;

Don't know for sure if it'll work, but something inside says it might.

回答3:

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
}
div#content
{
   min-height: 100%;
   height: 100%;
}

This works for sure...

回答4:

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

来源：https://stackoverflow.com/questions/3994686/min-height-100-doesnt-work-on-inner-div

标签

html

height

css