Question

我有一个场景，容器div将有很多子div但没有div会有实际的文本内容。所有子div都将具有容器div的％的宽度和高度。现在，如果将容器div的宽度和高度放在 px 中，那么如果我放宽度＆amp;容器的高度也在％中，然后在浏览器中不渲染任何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%; }。你拥有与身体相关的所有百分比，而身体则根据内容的高度测量身高。所以明确设置高度。

使div响应而没有文本内容

1 个答案: