使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元素伸展全部页面的高度

回答

相关问题