Question

我想使<body>的页面高度为100％。

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

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

当我将min-height: 100%;的{{1}}代替<body>时，它确实会延伸，但是我不能在体内的div使用百分比高度，因为身体没有高度设置。

如何使主体“无限”并且仍然可以使用内部具有百分比的div？

Answer 1

您想要的是不可能的，更确切地说是不合逻辑的。让我们问一个简单的问题：

什么将定义身体的高度？

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

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

您可以拥有（1）或（2），但不能同时拥有两者，因为没有逻辑方法可以为身体定义100%，允许其生长（取决于其内容）并允许其内容以使用高度内的百分比值。

将车身高度设置为全窗口高度

1 个答案: