html & body stretch

[planktonic]

In many projects, we apply something like the following

html,
body,
#__next,
#root  {
  height: 100%;
  min-height: stretch;
}

This ensures the html & body elements are both at least as tall as the viewport, even when content does not fill that space. There is often one extra id selector, for either a next.js or react-js project (extra selectors could be configurable?)

Right now we have

html {
  height: 100%;
}

body {
  min-height: 100%;
}

Which doesn’t work when a framework inserts its own root element (the id selectors above), and doesn’t account for the changing viewport height on mobile browsers.