最小高度为vh vs％为身体？

Question

我试图理解代码，为什么需要指定正文

body{
   position: relative;
   overflow: hidden;
   min-height: 100vh;
}

将html设置为

后的最小高度：100vh

html {
   height: 100%;
}

body,
html {
   margin: 0;
   min-height: 100%;
   overflow-x: hidden;
   padding: 0
}

高度：100％然后是身体，html到最小高度：100％？另外，为什么不使用min-height：100％用于身体？

Answer 1

在为html或body定义任何属性之前，我们应该知道一件事，即

Viewport > html > body

注意下面图像中视口和html之间的区别。

height: 100vh =视口高度的100％

height: 100% =父元素高度的100％

视口单元是相对单位，这意味着它们没有客观测量。相反，它们的大小取决于视口的大小。

视口高度：vh ---视口高度的1/100。

虽然以百分比定义的元素大小由其父元素决定，但如果父元素也填满整个屏幕高度，我们只能有一个元素填充整个屏幕高度。

这就是为什么你需要在html和body上添加height: 100%的原因，因为默认情况下它们没有大小，而viewport是html的父级。