Why should we use 100% height in both html and body tag but not one of them

Question

I am trying to make fullscreen background but when i put height: 100% in body, not thing happen. This also happen when i put it in html tag. But when i put it in both html and body, it work!. I dont know why. Can someone explain why ? Thank you so much!

Answer 1

In order for an element to have a relative height (%) it’s parent element also needs to have a height defined. Then, if you set the child element to, lets say,
height: 50%;
The height will be 50% of it’s parent.

Since the html tag is the root of the document, you can set it to 100% of the ‘screen’ height.

The following code is valid & will set a background-color on the entire screen:

html {
height: 100%;
width: 100%;
background-color: green;
}

But assuming that the body element will have content, it’s ideal to set a background to the body as well.