vh 中的最小高度与身体的百分比？

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

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

将 html 设置为 min-height: 100vh

html {
   height: 100%;
}

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

到 height: 100% 然后 body,html 到 min-height: 100%？另外为什么不只使用 min-height: 100% 作为 body 呢？

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

Viewport > html > body

请注意下图中视口和 html、body 之间的区别。

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

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

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

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

虽然以百分比定义的元素的大小是由其父元素决定的，但只有当父元素也填充屏幕的整个高度时，我们才能让元素填充屏幕的整个高度。

这就是为什么你需要添加height: 100%在 html 和 body 上，因为它们默认没有大小，并且视口是 html 的父级。