Question

这是我的HTML：

<div class="head">hello</div>
<div class="main">nice</div>

我希望div.main的高度延伸到页面底部。我试图将它的高度设置为100％，但它不起作用：

.head{
    background-color: red;
    width: 400px;
}
.main{
    background-color: green;
    width: 400px;
    height: 100%
}

小提琴：http://jsfiddle.net/cVRvj/

Answer 1

您必须将html和body设置为100％。其中包含的div只能照原样使用。{/ p>

html, body
{
  height: 100%;
}

请参阅此处以及“HTML高度100％”的其他百万条Google搜索结果：http://www.dailycoding.com/Posts/howtoset100tableheightinhtml.aspx

Answer 2

默认情况下，100% height，body和static div's的{{1}} relative div's表示100% height of this content.

您可以使用display:table属性

http://jsfiddle.net/cVRvj/4/

直到IE8＆amp;以上浏览器

或

你可以这样做

http://jsfiddle.net/cVRvj/6/

它可以在所有浏览器中使用

Answer 3

因为它取决于html和body部分的大小。试着把它放在你的css文件中：

html, body {
    height: 100%;
}

它应该有用。

Answer 4

检查出来

html, body {
    height: 100%;
}

http://jsfiddle.net/cVRvj/3/

Answer 5

从技术上讲，它正在发挥作用。这是100％足够的高度覆盖好的背景。正如其他人所说，你必须设置html，body为100％

Answer 6

我能想到的只是强迫一个较大的尺寸，比如400px 如果它更大，那就没关系。使用min-height和height来覆盖所有浏览器，因为IE历史上不知道最小高度。

.head{
    background-color: red;
    width: 400px;
}
.main{
    background-color: green;
    width: 400px;
    min-height: 400px;
    height: 400px;
}

Answer 7

另外，给头部一个百分比以防止滚动。

html,body{ height:100%; }
.head{
    background-color: red;
    width: 400px;
    height:5%;
}
.main{
    background-color: green;
    width: 400px;
    height: 95%
}

Demo

Answer 8

如果您将HTML和body标签设置为100％也可以。

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

添加最小高度有助于内容大于屏幕的100％（即您需要向下滚动才能看到所有内容）。如果没有它，height:100%;将不包含低于折叠的内容。

为什么不能高度：100％工作？

8 个答案:

http://jsfiddle.net/cVRvj/4/

http://jsfiddle.net/cVRvj/6/