最小高度100％不能在内部div上工作

我有一个叫做“内容”的div，我希望至少占据整个窗口的高度。最小高度100％不能在内部div上工作

因此，我所做的是：

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; 
}

用Firebug，我核实，确实现在占用了整个页面（甚至当有页面上没有内容就在我想要的。）

然而，问题是，内容并没有占据整个高度，而只是内容的大小。

编辑：似乎工作在铬7.0.517.41，但不是在Firefox 3.6.10（问题似乎发生在所有版本的Firefox 3.6.x和可能以前的版本以及）。

来源

2010-10-22 Razor Storm

我已经解决了类似的问题，

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

看来<html>有时考虑到计算的高度。

来源

2010-10-22 07:26:04 MatTheCat

试过了，对ff 3.6.10没有任何影响。 = [ – 2010-10-22 07:30:06

其实nvm它的工作，它是高度：auto！important;那是在杀死它。我想知道为什么它不影响铬。 – 2010-10-22 07:35:11

我知道的唯一的事情是高度计算是非常危险的，这取决于浏览器... =/ – MatTheCat 2010-10-22 07:40:14

你可以尝试设置明确的高度，以及一个最小高度：

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

不知道是否它会工作，但里面的东西说，这可能会。

来源

2010-10-22 07:22:06 Kyle

问题的，虽然是如果页面的内容没有得到大于一个窗口，然后在div不会规模。 = [ – 2010-10-22 07:22:45

使用高度代替身体上的最小高度。如果div变大，它应该溢出并正确显示（在firefox，chrome中工作，即对我来说）。 – kapa 2010-10-22 07:26:01

真棒它解决了它。我不确定哪一个标记为正确的答案，因为你们都为最终解决方案贡献了一部分：（使用html和body，并且还使用height和min-height）。投票了 – 2010-10-22 07:35:55

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

这工作肯定...

来源

2010-10-22 07:36:41

只有在我的情况下工作的东西，谢谢。 – 2015-08-16 13:08:58

你不需要对身体最小高度使用。大多数情况下，你不需要在子块上使用它。

这个小文章解释了这一切： http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height

来源

2013-09-30 13:54:39 SAiNT