如何使div viewport的高度，而不是CSS中的页面高度？

Question

所有使用top: 0em; bottom 0em;的建议都不正确。如果页面比视口高，那么代码会将d​​iv拉伸到视口底部之外。

其他建议使用100vh不幸的是没有足够的支持（我需要它在4.4之前的Android浏览器中工作）。

这是可能的只有CSS？

Answer 1

要使元素的高度达到100％，请将html，body和元素的高度设置为100％。

html, 
body, 
#your-element { height:100%; } 

编辑 - 摘录：

* { margin:0; padding:0; } 
 
html,body,div { height:100%; } 
 
div { background: #0f0; }

<div></div> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br>

Answer 2

如果你的容器可以是固定的，你可以只使用height: 100%

如果你需要的任何其他的定位，将需要使用JavaScript来做到这一点。