min-height in vh vs % for body?

Question

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

body{
   position: relative;
   overflow: hidden;
   min-height: 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
}

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

Answer 1

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

Viewport > html > body

Mind the difference between viewport and html, body in theimage below.

height: 100vh = 100% of the viewport height

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.

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.

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.