在百分比DIV高度[复制](Div Height in Percentage [duplicate]

可能重复：
百分比身高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/

^您的文档只有20像素高。 20像素的50％是10px的，它不是你所期望的。

^现在，如果你改变文档的高度，整个页面（150像素）的高度，为150px 50％为960x75像素，那么它会工作。

Answer 2:

你需要给body和html的高度了。 否则，身体只会高达其内容（单格），并有50％将是这个div的高度的一半。

更新小提琴： http://jsfiddle.net/j8bsS/5/

Answer 3:

有分号缺失（;）的“50％”后

但你也应该注意到，您的div的百分比连接到包含它的股利。

例如：

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

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

在这里您.container的高度，将50像素。 这将是100像素从包装DIV的50％。

如果你有：

ADSF

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

那么你.container将是200像素。 包装物的50％。

所以，你可能想看看div的“包装”您“.container” ...

文章来源: Div Height in Percentage [duplicate]