如何使元素成爲頁面的整個高度？

Question

有沒有一種方法可以設置DIV元素佔據頁面上的所有高度。喜歡的東西：

div.left { 
    height: 100%; 
    width: 50%; 
    background-color: blue; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

我Google'd了幾次，但他們都看起來像真的很複雜的工作變通什麼可能是真的很簡單的問題，有一個簡單的解決方案。

Answer 1

如果div是body直接子，這個工程：

body, html {height: 100%; } 
div { height: 100%; } 

否則，您必須不斷添加height: 100%它每次的父母，祖父母，......直到你已經達到了一個直接子女body。

很簡單。對於要工作的百分比高度，父級必須具有指定的高度（px，％...無論哪個）。如果沒有，那麼就好像你設置了height: auto;

這樣做的另一種方式就像你在答案中一樣：它是給定一個絕對位置值，相對於定義頁面高度的元素。

Answer 2

確保您將height: 100%設置爲html和body，以便div具有高度上下文！希望有所幫助。

Answer 3

敢肯定你需要的html和body設置爲100％：

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

div.left { 
    height: 100%; 
} 

小提琴here。

Answer 4

這是使div佔據頁面全高的最簡單方法。

身高：100vh;