使 div 响应没有文本内容答案

【问题标题】：Make div responsive with no text content使 div 响应没有文本内容
【发布时间】：2013-06-21 15:35:04
【问题描述】：

我有一个场景，容器 div 将有很多子 div，但没有一个 div 会有实际的文本内容。所有子 div 的宽度和高度都在容器 div 的 % 中。现在，如果将容器 div 的宽度和高度放在 px 中，那么它会显示在浏览器中，如果我将容器的宽度和高度也放在 % 中，那么所有 div 都不是在浏览器中渲染。就像这个小sn-p。

<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。有什么解决办法吗？

【问题讨论】：

您的页面是 HTML 还是 XHML？自动关闭的div 标签不是有效的 HTML。
在没有任何边界或背景的情况下，如何判断它是否工作？此外，可能需要将body 设置为height:100%，就好像未定义它会假定auto。
渲染是什么意思？？你的意思是div现在用firbug检查时显示的是其他检查工具？？？
50% 什么？如果父母没有高度规则和有效值，它将是 50% :)
@Fabrício Matté：抱歉，关闭 div 是一个错误，我已经更新了。 Kashif R：是的，我的意思是当我检查 div 时，它们没有显示出来。

标签： html css responsive-design

【解决方案1】：

为我工作：http://jsbin.com/esosoc/1/edit

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

【讨论】：

谢谢。在 html 上设置 hight，body 为 100% 解决了这个问题。