html - 仅使用 css，html 元素如何填充剩余屏幕高度的 100%？

Question

我有一个标题元素和一个内容元素:

#header
#content

我希望标题的高度固定，内容填满屏幕上所有可用的剩余高度，使用 overflow-y: scroll;。

没有 Javascript 这可能吗？

Answer 1

忘记所有的答案，这行 CSS 在 2 秒内为我工作:

height:100vh;

1vh = 浏览器屏幕高度的 1%

source

对于响应式布局缩放，您可能需要使用:

min-height: 100vh

[2018 年 11 月更新]正如评论中提到的，使用最小高度可能会避免响应式设计出现问题

[2018 年 4 月更新] 如评论中所述，早在 2011 年提出问题时，并非所有浏览器都支持视口(viewport)单位。其他答案是当时的解决方案 -- vmax 在 IE 中仍然不支持，所以这可能不是最好的解决方案。