将 body height 设置为 full window height

Question

我想 <body> 页面高度的 100%。

当我在 <html> 和 <body> 上使用 100% 或 100vh 时，当页面内容溢出视口时它们不会扩展。

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

当我将 min-height: 100%; 用于 <body> 而不是 height: 100%; 时，它确实会扩展，但是我不能对 body 内的 div 使用百分比高度，因为 body 没有高度设置。

如何制作主体 "infinite" 并且仍然能够在其中使用带有百分比的 div？

Answer 1

你想要的是不可能的，更准确地说是不合逻辑的。让我们问一个小问题：

What will define the height of the body?

1) 您希望 body 成为屏幕的 height:100%：您可以使用级联 height:100% 或 height:100vh 和 body将具有明确指定的高度，因此您可以在其中使用百分比高度，但 body 不会增长超过 100%.

2) 您希望 body 成为屏幕的 min-height:100%：您可以使用 min-height:100vh 或 min-height:100%，同时将 height:100% 设置为html。在这种情况下，body 的内容将定义实际高度，因为您只需添加一个 min-height 约束。如果您有很多内容，body 将超出 100% 限制，否则您将拥有 100%。在这种情况下，很明显内容不能在高度范围内使用百分比值，因为内容定义了 body 高度。

您可以拥有 (1) 或 (2)，但不能同时拥有两者，因为没有合理的方式将 min-height 定义为 body，允许它增长（取决于它的内容）并允许其内容在高度范围内使用百分比值。

将 body height 设置为 full window height

Set body height to full window height

html

css

height