html - 如何使 div 视口(viewport)高度，而不是 CSS 中的页面高度？

Question

所有使用的建议top: 0em; bottom 0em; 不正确。如果页面比视口(viewport)高，该代码会将 div 拉伸(stretch)到视口(viewport)底部之外。

不幸的是，另一个使用 100vh 的建议没有得到足够的支持(我需要它在 4.4 之前的 Android 浏览器中工作)。

仅使用 CSS 是否可行？

Answer 1

要使元素的高度为 100%，请将 html、正文和元素的高度设置为 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>