Fix without media query

body {
  height: 100vh;
}

should be fixed to

body {
  height: 100vh;
  height: -webkit-fill-available;
}

-webkit-fill-available is automatically ignored by browsers that don’t understand it.

[simevidas]

@kripod It renders correctly in Chrome on my simple demo page: https://output.jsbin.com/noqasek/quiet.

But there is a problem in the new Firefox. The footer is behind the URL bar:

[simevidas]

It causes issues in Chrome: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/#comment-4910262284

When I first load this page in Chrome on Android, the MAIN element is several screens large for some reason, and I have to scroll down to get to the footer (first screenshot). But then when I pull-to-refresh, the page renders correctly (second screenshot).