Div百分比高度

Question

  

可能重复：
  Percentage Height HTML 5/CSS

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

例如：

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

CSS：

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

当我将高度从％更改为px时，它的效果非常好。 ％与px一样有效，但为什么只有px有效，％为无效。 here是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，那么它将起作用。

Answer 2

您还需要为body和html提供一个高度。否则，身体将仅与其内容（单个div）一样高，并且其中50％将是该div的高度的一半。

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

Answer 3

在“50％”

之后缺少分号（;）

但您还应该注意到div的百分比连接到包含它的div。

例如：

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

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

这里.container的高度为50px。它将是包装器div中100px的50％。

如果你有：

              ADSF            

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

然后你.container将是200px。 50％的包装。

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