gpt4 book ai didi

html - 将 body height 设置为全窗口高度

转载 作者:太空宇宙 更新时间:2023-11-04 01:02:19 28 4
gpt4 key购买 nike

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

当我在两个 <html> 上都使用 100% 或 100vh 时和 <body> ,当页面内容溢出视口(viewport)时,它们不会扩展。

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

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

如何使主体“无限”并且仍然能够在其中使用带有百分比的 div?

最佳答案

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

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:100vhmin-height:100% 同时将 height:100% 设置为 html。在这种情况下,body 的内容 将定义实际高度,因为您只需添加一个 min-height 约束。如果您有很多内容,正文将超出 100% 的限制,否则您将以 100% 的速度拥有它。在这种情况下,很明显内容不能在高度范围内使用百分比值,因为内容定义了主体高度。

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

关于html - 将 body height 设置为全窗口高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52995085/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com