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

Question

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

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

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

原文由 bodyofheat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 html,
body {
    height: 100%;
}

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

但是 body 的内容可能需要动态更改。将最小高度设置为 100% 将实现此目标。

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

原文由 BentOnCoding 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

作为将 html 和 body 元素的高度设置为 --- 的替代方法，您还可以使用 percentage length 100% 。

5.1.2.视口百分比长度：’vw’、’vh’、’vmin’、’vmax’ 单位

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

在这种情况下，您可以使用值 100vh - 这是视口的高度。

这里的例子

body {
  height: 100vh;
  padding: 0;
}

 body {
  min-height: 100vh;
  padding: 0;
}

这在大多数现代浏览器中都受支持 - 可以在此处找到支持。

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 4.0 许可协议