Css height problem?

Question

Why the height of div won't work
When i set
Height:100%
But
Height:100px
It work

https://code.sololearn.com/W05IyT9WmT5y/?ref=app

Answer 1

% is relative to its parent element.
so for example, the parent has height of 500px. child elememt with height of 50% will have the height of 250px.

so in your code, body (which is the parent) does not have a height yet, it'll just stretch according to its child element. so 100% height to the child wont mean anything.

width also have the similar behavior. what makes it seems different is because most of the time the parent is block level element (like body or div) that will always fill horizontal space, so it always has its width.

Answer 2

Height 100% doesn't mean 100% of the page but 100% of the space, which is required for the element. And this is here exactly one line with much less than 100px. It's a bit confusing, because the width works different.

Answer 3

The solution will be to set the body's height to 100vh(viewport height)

body{
min-height: 100vh;
}