purpose of setting height to 100% for body and html

Question

<style>
html, body {
    height: 100%;
}

img.one {
    height: auto;
    width: auto;
}

img.two {
    height: 50%;
    width: 50%;
}
</style>

In the css above, when I take out the height property of body and html something seems to happen but I don't understand what. What is the purpose of setting the height to 100% for body and html?

Paste your html code to let us see what is actually happening? — Jyothi Babu Araja, Nov 19 '16 at 20:36
This answer covers it: [Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Nov 19 '16 at 22:04

score 2 · Answer 1 · answered Nov 19 '16 at 20:56

2

Add border to see the differences.

html, body {
    height: 100%; /* Ex: Change it 100% to %75 */
    border: 2px solid red;
}

When you done you can remove the line.

answered Nov 19 '16 at 20:56

Mehmet

217
3
12

score 1 · Accepted Answer · answered Nov 19 '16 at 21:00

1

If you remove the height from html, body then img.two { height: 50%; } has no reference height any more. 50% of what should it then be?

answered Nov 19 '16 at 21:00

connexo

53,704
14
91
128

purpose of setting height to 100% for body and html

2 Answers2