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

小编典典

all

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

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

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

阅读 158

2022-02-28

共1个答案

小编典典

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

html, 
body {
    height: 100%;
}

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

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

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

2022-02-28