html - 使 div 响应没有文本内容

Question

我有一个场景，容器 div 将有很多子 div，但没有一个 div 有实际的文本内容。所有子 div 的宽度和高度都在容器 div 的 % 中。现在，如果将容器 div 的宽度和高度放在 px 中，那么它会显示在浏览器中，如果我将容器的宽度和高度也放在 % 中，则没有任何 div在浏览器中呈现。就像这个小片段。

<div class="container">
    <div class="line1 line">
        <div class="item1">
        <div class="item2">
    </div>
    <div class="line2 line">
        <div class="item1">
        <div class="item2">
    </div>
</div>

CSS:

.container{
    width: 540px;
    height: 440px;
}
.line{
    margin: 5% auto;
}
.line1{
    width: 15%; 
    height: 8%;
}
.line2{
    width: 40%;
    height: 12%;
}

如果我愿意

.container{
  width: 50%; //50% of browser screen width
  height: 60%;//60% of browser screen height
}   

然后没有任何 div 在浏览器中呈现。任何解决方案？

Answer 1

对我有用:http://jsbin.com/esosoc/1/edit

正如@dominic-b-c 所指出的，您可能需要设置 html, body { height: 100%; }。您拥有所有与 body 相关的百分比，而 body 的高度是根据内容的高度测量的。因此明确设置高度。