My goal is to create sections with a minimum height of 100%, and it seems like the general recommendation is:
html{
height: 100%;
}
body {
min-height: 100%;
}
Even direct children should have a min-height of 100%. The confusion arises when HTML has a fixed height of 100% while the body can expand, resulting in a potentially disjointed document structure. This scenario raises concerns about semantics, such as the relationship between html and body tags. Furthermore, if your section is nested within multiple other divs, all parent elements may also need a min-height of 100%. This approach appears somewhat unconventional.
What would be the most elegant solution? While height: 100vh is ideal, browser support varies. Would using JavaScript to determine the viewport size and set the height property for relevant sections be a better alternative?