最小高度 100% 不适用于内部 div答案

【问题标题】：min-height 100% doesnt work on inner div最小高度 100% 不适用于内部 div
【发布时间】：2011-04-29 00:35:06
【问题描述】：

我有一个名为“内容”的 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;
}

使用萤火虫，我验证确实现在占据了整个页面（即使页面上没有内容。正如我想要的那样）

但问题是，内容并没有占据的整个高度，而是仅与其内部内容一样大。

编辑：似乎在 chrome 7.0.517.41 中有效，但在 firefox 3.6.10 中无效（问题似乎出现在 firefox 3.6.x 的所有版本中，也可能在以前的版本中出现）。

【问题讨论】：

标签： html height css

【解决方案1】：

你不需要在 body 上使用 min-height。大多数时候，您也不需要在子块上使用它。

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

【讨论】：

【解决方案2】：

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

这确实有效...

【讨论】：

【解决方案3】：

我已经解决了类似的问题

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

似乎<html> 有时会在计算高度时被考虑在内。

【讨论】：

试过了，对ff 3.6.10没有影响。 =[
实际上 nvm 有效，它是 height:auto!important;那正在杀死它。我想知道为什么它不影响 chrome。
我唯一知道的是高度计算非常危险，具体取决于浏览器... =/

【解决方案4】：

您可以尝试设置明确的高度和最小高度：

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

不确定它是否会起作用，但里面的东西说它可能会。

【讨论】：

问题在于，如果页面内容确实大于一个窗口，那么 div 将无法缩放。 =[
在身体上使用高度而不是最小高度。如果 div 变大，它应该溢出并正确显示（适用于 firefox、chrome，即对我来说）。
太棒了，它解决了它。我不确定将哪一个标记为正确答案，因为你们俩都为最终解决方案贡献了一部分：（使用 html AND body，并且还使用 height 和 min-height）。投票赞成