Ok, so here is the setup! A short while ago, I was trying to listen
for mouse events on the body of a mostly empty page. What I
wanted to do was make the body element
take up the full height of the page so that I have a giant hit
target that I can do all sorts of event-related shenanigans on. Knowing what I had to do, I specified the
body element in the HTML and wrote
some CSS that looked as follows:
Even though the height of the body covers all the viewport, the immediate child (the root of a react app, a div doesn’t stretch to the same height on giving height: 100%). The child only takes the stretch when I do body {height: 100%}. How do I solve this?
html, body {
height: 100%;
overflow: auto; <- this is the fix
}
min-height wont allow children to inherit height. Unless you inherit min-height. VH and VW have mobile issues because the url bar and actions bar come in and out the viewport height changes and therefore so does your content height. This has a horrible jumping effect.