使div元素伸展全部頁面的高度

我已經建立了這個小ap的角度，並希望容器元素伸展頁面的整個高度，當內容不填充頁面的高度例如大屏本頁面並不：使div元素伸展全部頁面的高度

我試圖將其設置爲

position: absolute; 
top:0; 
bottom:0; 
height:100%

但是當內容溢出，則容器的高度只stretchs視口的高度。

任何想法？或者是有角度地將類添加到身體的方式？

來源

2015-07-03 user1937021

您可以使用高度：100vh; （vh表示視口高度）。所以100vh基本上意味着「屏幕的高度」 –

http://jsfiddle.net/uf2u32gf/我看到這個在線，我不知道如何在所有瀏覽器工作。 – aahhaa

只是查看它http://caniuse.com/#search=vh不知道你是否可以。 – aahhaa

沒錯，只是

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    min-height: 100vh; 
 
    background: red; 
 
}

<div class="container"> 
 
</div>

JSfiddle Demo

Support for viewport units

或者一種替代

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
} 
 
.container { 
 
    min-height: 100%; 
 
    background: red; 
 
}

<div class="container"> 
 

 
</div>

來源

2015-07-03 15:42:48

瀏覽器支持「vh」它是ie9 +。誰現在使用ie8？ –

我剛剛意識到，視口單元不是這樣。它只是獲得文件高度而不是文件高度。 –

但是OP想要設置文檔高度而不僅僅是視口高度。 –

絕對定位不是設置完整文檔高度的方法，但它設置爲視口高度。您可以使用固定的位置，而不是：

#element{ 
    position: fixed; 
    top:0; 
    bottom:0; 
}

來源

2015-07-03 15:42:10

html, body {height:100%; min-height:100%; margin:0; padding:0;} 
 
#full {background:red; height:100%;}

<div id='full'>hmm</div>

來源

2015-07-03 15:51:39 Moob

使div元素伸展全部頁面的高度

回答

相關問題