html - vh 的最小高度与 body 的百分比？

Question

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

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
}

到高度:100% 然后 body,html 到最小高度:100%？另外，为什么不直接使用 min-height: 100% 作为 body？

Answer 1

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

Viewport > html > body

注意下图中viewport和html、body的区别。

高度:100vh = 视口(viewport)高度的 100%

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

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

视口(viewport)高度:vh --- 视口(viewport)高度的 1/100。

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

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