将body和html的高度设置为100％的目的

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?

Answer 1

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.

Answer 2

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