Utilizing flexbox, I have identified a solution that has widespread support among browsers. By defining HTML as display: flex; min-height: 100%, the flexbox container will expand to at least the size of the viewport. The body, acting as a child of the flexbox, will automatically adjust its height to fill the flexbox. If the contents within the body exceed the height of the viewport, the flexbox container will dynamically increase in height accordingly.
I am still puzzled by the fact that setting min-height: 100% on the body element does not produce the desired outcome, especially when the HTML document clearly contains content upon inspection. Even after experimenting with explicit height values, the results remain perplexing – for instance, the body may match the height of the viewport while the #Main element fails to reach the same height despite being set to height: 100% – a baffling scenario indeed.
The issue becomes further confounding when the background of the body spills beyond the actual content within the body itself.
Given the frustrating nature of these inconsistencies, I must refrain from delving deeper into CSS grievances before embarking on an extensive rant about its shortcomings.
html {
min-height: 100%;
display: flex;
margin: 0;
padding: 0;
}
body {
flex-grow: 1;
background: gray;
margin: 0;
padding: 0;
border-bottom: 3px solid red;
}
#Main {
height: 100%;
width: 50%;
margin: 0 auto;
background: white;
}
<div id="Main">
MY HEIGHT SHOULD AT LEAST MATCH THE VIEWPORT.
<hr>
Let's recap:
<br>HTML has min-height: 100% - ensuring it is as tall as the viewport.
<br>BODY also has min-height: 100% - ensuring its height matches HTML.
<br>Yet, *I* am set to height: 100% - WHY AM I NOT TALL
<hr>
Another puzzling aspect: the entire background is gray, yet the bottom of the BODY does not extend fully downwards.
<hr>
One more anomaly occurs when my content expands, the body fails to keep pace.
<button onclick="document.getElementById('content').style.display='block';">
Click me to add content.
</button>
<div id="content" style="height: 600px; background: green; display: none;">
large content.
</div>
</div>