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）這些小提琴使他們更好地理解：

現在的布局是什么
它應該是什么樣的