As an example:
html {
height: 100%;
background-color: yellow;
border: 5px solid black;
}
body {
min-height: 100%;
background-color: green;
}
div {
height: 120dvh;
}<div>
Some content.
</div>As an example:
html {
height: 100%;
background-color: yellow;
border: 5px solid black;
}
body {
min-height: 100%;
background-color: green;
}
div {
height: 120dvh;
}<div>
Some content.
</div>Notice the <html> element is shorter than the <body> element.
Also see:
https://web.archive./web/20250318123446/https://steffesgroup/
The <body> element is taller than the <html> element.
Is there a use-case for this situation, or should all <html> elements' heights always be greater than or equal to their contained <body> elements? Or does it not matter at all?
Additional Context:
I'm interested in general answers to the above question, but in case I need to add more context so I don't get closed: I'm currently experiencing an issue where a menu decides whether to render above or below its button depending on whether it would overflow its nearest scrolling container. But in a website with the html height smaller than the body, when I've scrolled down the page, if the html document element is the nearest scrolling ancestor, the menu always thinks it's overflowing and so always flips in one direction, even when it does have "visual" space below it to render.
Share Improve this question edited Mar 24 at 17:04 cyclingLinguist asked Mar 20 at 15:58 cyclingLinguistcyclingLinguist 3722 gold badges5 silver badges18 bronze badges 2 |1 Answer
Reset to default 0No, the html element's height does not need to be greater than or equal to the body height. It often isn't by default and this is normal behavior in browsers. The browser treats the body as the main scrollable area, and it can grow taller than the html. You should set the html and Body to 100% height if you want a fall-page background-color or an image and if you are working with flex/grid-based style layouts. This will prevent you from scorlling issues or having layout glitches.
<>icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/example doesn't work can I just paste a link. – Paulie_D Commented Mar 20 at 17:02height: 100%, and the body element tomin-height: 100%and then the height of the body element will be at least the height of the viewport. If the body element is taller than that, then the body element overflows the root element, but that's totally fine. By default, the root element's principal box is just a regular block container box and its contents can overflow just like any other block container. – Alohci Commented Mar 21 at 0:59