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

<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引擎處理該信息，並導致在服用視口的大小爲每個divs？

2014-01-27 x1886x

因爲你設置了100％的高度，和CSS讓你的瀏覽器窗口的高度，並適用於每個元素，如果你需要設置一個DIV是半窗口的高度顯示，只是定義height: 50%;

2014-01-27 05:49:47 BorHunter

如果您的div包含您已設置高度的包裝，然後內部div設置upoto包裝應用100% height但在您的情況下，您沒有設置高度所以它去window height 100%。你會清楚這兩張demo demo1 demo2

enter image description here

2014-01-27 05:51:53

無論是.test的div是由單個的div包裹。

除了嘗試在你的CSS中有這個，以確保身體是100％。 DEMO

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

2014-01-27 05:53:22 loxxy

它爲什麼失敗

您已設置爲height

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

百分比......這意味着，這將是其含有的100%元素，即<div> ...所以你必須設置div的100％高度...

請記住，無論何時以百分比設置尺寸，它始終被視爲相對於div的父元素。

所以，將.test設置爲100%將父div和body設置爲100%太!!

Chedk這些小提琴更好地理解：

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

2014-01-27 06:02:16 NoobEditor

回答