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-bc 指出的那样，您可能想要设置html, body { height: 100%; }. 您拥有与 body 相关的所有百分比，而 body 的高度是根据内容的高度测量的。所以明确设置高度。