vh的最小高度与身体的百分比? [英] min-height in vh vs % for body?

问题描述

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

I'm trying to understand a code, why is there a need to specify for body

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

将最小高度:将html设置为100vh

to have min-height: 100vh after setting the html to

html {
   height: 100%;
}

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

到高度:100％，然后是正文，html到最小高度:100％?还有为什么不只使用最小身高:100％用于身体呢?

to height: 100% then body,html to min-height: 100%? Also why not just use min-height: 100% for body?

推荐答案

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

Before defining any property to html or body, we should know one thing i.e.

Viewport > html > body

注意视口和html之间的区别，如下图所示.

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

height: 100vh = 100% of the viewport height

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

height: 100%= 100% of the parent's element height

视口单位是相对单位，这意味着它们没有客观的度量.取而代之的是，它们的大小由视口的大小决定.

The viewport units are relative units, which means that they do not have an objective measurement. Instead, their size is determined by the size of the viewport.

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

Viewport Height : vh --- 1/100th of the height of the viewport.

以百分比定义的元素的大小由其父元素确定，但如果父元素也占满屏幕的整个高度，则我们只能使元素占满整个屏幕的高度.

Whereas the size of an element defined in percentage is determined by its parent element, we can only have an element fill the entire height of the screen if the parent element also fills the entire height of the screen.

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

That is why you need to add height: 100% on html and body, as they don't have a size by default and viewport is parent for html.

这篇关于vh的最小高度与身体的百分比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！