3

我正在尝试设置 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>
4

4 回答 4

2

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

因此，父级的高度将取决于其子级的高度，而其子级的高度将取决于父级的高度 - 无限循环！

PS Fred 的方法有效，以防您对设置高度的关注围绕着设置静态高度。将高度设置为 100% 可能会解决您的难题。

于 2013-08-15T13:16:11.723 回答
2

你需要让body和html元素有height:100%，你需要给外层div height:100%。

CSS：

body, html { height: 100%} 

<div style="overflow: hidden; clear: both; height: 100%">
    <div style="background-color: blue; height: 70%;">Top</div>
    ...
于 2013-08-15T13:22:33.377 回答
0

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

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

于 2013-08-15T13:15:33.273 回答
0

您可以将 a 添加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>

这是小提琴

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

...绝对定位元素的内容不会在任何其他框周围流动。它们可能会遮盖另一个框的内容（或自己遮盖），具体取决于重叠框的堆栈级别。

于 2013-08-15T14:01:50.650 回答