+ 2

Css height problem?

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

18th Jun 2020, 4:42 AM
Programmer Raja
Programmer Raja - avatar
3 Answers
+ 4
% 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.
18th Jun 2020, 5:34 AM
Taste
Taste - avatar
+ 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.
18th Jun 2020, 5:04 AM
Sandra Meyer
Sandra Meyer - avatar
+ 1
The solution will be to set the body's height to 100vh(viewport height) body{ min-height: 100vh; }
18th Jun 2020, 6:07 AM
Ore
Ore - avatar