Div百分比高度

Question

可能重复:
百分比高度HTML 5/CSS

这需要一个简单的但我为什么以div的百分比指定的高度不适用于它.

例如:

<div class="container">
  adsf
</div>

CSS:

.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

当我将高度从%更改为px时,它可以完美地运行.%与px一样有效,但为什么只有px有效而%无效.这是jsfiddle

编辑 虽然在原始问题50%之后我错过了分号,这完全破坏了它.事实上,我打算问的是为什么50%不会使它消耗50%的容器.它的高度仅取其高度而不是其容器的50%.

Answer 1

它不占整页的50%是因为"整页"只是你的内容有多高.更改封闭html,并body以100%高度的,它会工作.

html, body{
    height: 100%;
}
div{
    height: 50%;
}

http://jsfiddle.net/DerekL/5YukJ/1/

^您的文档只有20px高.20px的50%是10px,并不是你所期望的.

^现在,如果您将文档的高度更改为整个页面的高度(150px),150px的50%是75px,那么它将起作用.