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

时间：2014-01-27 05:41:55

标签： css html

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>

我已经设置了上面这个简单的页面，试图找出它呈现它的方式。

  • 唯一的css属性是在'test'类的高度设置的。

  • 导致两个div设置为视口的高度。如果我改变窗口的大小，两个div也会调整大小。

  • 奇怪的是，当我在屏幕上完全最大化时，两个div的高度均为939px，身高为1878px。

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

有人能解释一下css引擎处理这些信息的顺序，并导致获取每个div的视口大小吗？

4 个答案:

答案 0 :(得分：0)

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

此处的链接必须有助于您了解此http://www.w3.org/wiki/CSS/Properties/height

答案 1 :(得分：0)

如果你的div包含你设置了高度的包装器，那么内部div在应用100% height时会设置该包装器，但在你的情况下，你没有设置高度，所以它转到{{1 }}。您将从这两个演示demo1 demo2

中清楚地看到

enter image description here

答案 2 :(得分：0)

.test div都被一个div包裹。

除了尝试在你的CSS中使用它以确保身体是100％。 DEMO 

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

http://jsfiddle.net/96G46/

答案 3 :(得分：0)

失败的原因

您已将height设为

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

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

请记住，无论何时以百分比设置维度，都始终将其视为相对于div的父元素。

所以，将.test设置为100%将父div和body设置为100% !!

Chedk这些小提琴更好理解：

what your layout is now
what it is supposed to be like

相关问题
最新问题