html - 使正文具有浏览器高度的 100%

Question

我想让 body 有 100% 的浏览器高度。我可以使用 CSS 做到这一点吗？

我尝试设置 height: 100%，但它不起作用。

我想为页面设置背景颜色以填充整个浏览器窗口，但如果页面内容很少，我会在底部看到一个难看的白条。

Answer 1

尝试将 html 元素的高度也设置为 100%。

html, 
body {
    height: 100%;
}

Body 向其父 (HTML) 查找如何缩放动态属性，因此 HTML 元素也需要设置其高度。

但是，body 的内容可能需要动态更改。将 min-height 设置为 100% 即可实现此目标。

html {
  height: 100%;
}
body {
  min-height: 100%;
}