Question

我正在设置2个div的大小，以70％到30％的比例填充页面。

如果不设置“html，body”的大小，我怎样才能让div显示到正确的高度。

目前它显示两行单行文本的高度。感谢

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>

<body>
<div style="overflow: hidden; clear: both;">
    <div style="background-color: blue; height: 70%;">Top</div>
    <div style="background-color: red; height: 30%;">bottom</div>
</div>
</body>

</html>

Answer 1

你不能用CSS做这件事，这是有充分理由的。如果你没有为身体设置一个高度，它的高度将变得足以容纳它的所有孩子。现在，如果您为孩子的身高使用基于百分比的单位，孩子的身高将根据其父亲的身高计算。

因此，父母的身高将取决于其子女的身高，其子女的身高将取决于父母的高度 - infinte循环！

P.S。如果您对设置高度的关注围绕设置静态高度，Fred的方法是有效的。将高度设置为100％可能会解决您的困境。

Answer 2

你需要让body和html元素的高度为100％，你需要给出外部div高度：100％。

CSS：

body, html { height: 100%} 

<div style="overflow: hidden; clear: both; height: 100%">
    <div style="background-color: blue; height: 70%;">Top</div>
    ...

Answer 3

不幸的是，您需要为DIV父级分配固定高度，以便70％ - 30％的比例起作用。

您可以做的一件事是使用JavaScript获取窗口的高度，然后将此值分配给父DIV。通过这种方式，百分比将起作用，因为它具有如何重新调整大小的参考。

Answer 4

您可以向父position: absolute添加div，然后将其展开以获得完整的宽度和高度。请注意，width: 100%声明对于强制执行块级格式化上下文非常重要。

<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
  <div style="background-color: blue; height: 70%; width: 100%;">Top</div>
  <div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>

这是fiddle

请注意，这将从“正常流程”中删除此div，并且兄弟元素将被遮挡/遮挡。 CSS 2.1 spec提供了以下建议：

...绝对定位元素的内容不会绕过任何其他框。它们可能会遮挡另一个盒子的内容（或自身被遮挡），具体取决于重叠盒子的堆叠级别。

如何在基本布局中设置div的高度

4 个答案: