如何使CSS视口高度，而不是CSS中的页面高度？

Question

使用top: 0em; bottom 0em;的所有建议都不正确。如果页面高于视口，则该代码将div拉伸到视口的底部。

遗憾的是，另一个使用100vh的建议没有足够的支持（我需要在4.4之前的Android浏览器中使用它）。

这只能用CSS吗？

Answer 1

要使元素高度为100％，请将html，body和element设置为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进行此操作。