最小高度100%不能作用于内分区

I have a div called "content" which I wish to at least take up the entire height of a window.

我有一个叫“内容”的div，我希望至少占据整个窗口的高度。

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)

使用firebug，我验证了现在确实占据了整个页面(即使页面上没有内容)。就像我想要的)

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

编辑:似乎可以在chrome 7.0.517.41中使用，但在firefox 3.6.10中就不行了(问题似乎出现在所有版本的firefox 3.6中。也可能是以前的版本)。

4 个解决方案

#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

这篇小文章解释了这一切:http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#清晰度-宽度-高度

#1