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

Question

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

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%？另外,为什么不使用最小高度:身体100%？

Answer 1

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

Viewport > html > body

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

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

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

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

视口高度:vh ---视口高度的1/100.

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

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