How does the html element and body element differ?

Question

I am not clear of how html and body elements behave.

Look at the answer, He put the height of the body and html to 100% which helped him solve his answer,

How did that happen? please help me.

Did you try it to see what happens? Does it not do what you want? — Jim Garrison, Feb 02 '16 at 07:10
I tried, Unfortunately, when I remove anyone of the element i.e html or body from the block that gives them 100% height. things get odd. — buoyantair, Feb 02 '16 at 07:14
It will be easier to explain this if you say what you **expected** to happen. — Chris, Feb 02 '16 at 07:29

score 0 · Accepted Answer · answered Feb 02 '16 at 07:53

One problem is that html and body have height:auto by default, which is rather hard to do calculations with. I mean, what is 50% of auto? So, those calculations fail.

And even if you can know the height the body, that is, look at the resulting height after it has been rendered, it's still not the same as the height of the screen. Example:

html {background:lime}
body {background:black; color:white}

This is the body

See? body is only one line high. So any child of body that you set to height:100% will still be as high as its parent.

Therefore the solution is to set both html and body to height:100%, which will give them the same height as the window.

Thanks for the little explanation! These little doubts do help me alot! — buoyantair, Feb 02 '16 at 14:08

How does the html element and body element differ?

1 Answers1