html - 为什么不能高度:100% work?

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

fiddle :http://jsfiddle.net/cVRvj/

Answer 1

您必须将 html 和 body 设置为 100%。它们里面包含的div只能拿多少就拿多少。

html, body
{
  height: 100%;
}

在这里查看“HTML 高度 100%”的其他一百万个谷歌结果:http://www.dailycoding.com/Posts/howtoset100tableheightinhtml.aspx