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，那么它将起作用。

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”......