div的高度100％延伸到窗口大小

Question

HTML：

<html>
<head>

</head>

<body>
<div>
<div class="test"> test</div>
<br />
<div class="test"> test</div>
</div>
</body>

</html>

风格：

 <style>

.test{
height:100%;
background-color:red;
}

</style>

我已经按照上面的步骤设置了这个简单的页面，以尝试发现其呈现方式的原因。

甚至认为div的高度设置为包含元素的100％

谁能解释css引擎处理此信息的顺序，并导致采用每个div的视口大小？

Answer 1

因为您将高度设置为100％，并且css获取了浏览器窗口的高度并适用于每个元素，所以如果您需要将一个div显示在半个窗口高度上，则只需定义height: 50%;

这里的链接必须对您有所帮助，以帮助您理解此http://www.w3.org/wiki/CSS/Properties/height

Answer 2

如果div包含您已设置高度的包装器，则内部div在应用100% height时将设置包装器，但是在您的情况下，您没有设置高度，因此它变为window height 100% 。 你会从这两张demo明确demo1的 DEMO2

在此处输入图片说明

Answer 3

两个.test div都由一个div包裹。

除了尝试在您的CSS中确保身体为100％。 演示

html,body{
    min-height:100%; 
    height:100%; 
}

Answer 4

为什么失败

您已经设置了height

<div class="test"> test</div>

以百分比表示...这意味着它将是其包含元素的100% ，即<div> ...所以您也必须设置100％的div高度...

请记住，每当您以百分比设置尺寸时，总是相对于div的父元素来考虑尺寸。

因此，要将.test设置为100%将父div设置为100%将body也设置为100% ！

切克（Chedk）这些小提琴使他们更好地理解：

现在的布局是什么
它应该是什么样的