Question

我有一个名为“内容”的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，我确认现在确实占用了整个页面（即使页面上没有内容。就像我想要的那样）

然而问题是，内容并未占据整个高度，而是仅与内部内容一样大。

编辑：似乎在chrome 7.0.517.41中工作，但在firefox 3.6.10中没有（问题似乎发生在所有版本的firefox 3.6.x以及可能的早期版本中）。

Answer 1

我已经用

解决了类似的问题

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

有时会考虑<html>来计算身高。

Answer 2

您可以尝试设置显式高度以及最小高度：

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

不确定它是否会起作用，但内部的某些内容可能会说明。

Answer 3

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

这肯定有用......

Answer 4

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

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

最小高度100％不适用于内部div

4 个答案: