Hey. I hope no one asked this question before because I could not find it. I am trying to build a website, that contains a header, a main-part, and a footer. All of them together should make up 100% of the screen size. The height of the header and footer are fixed to 100px each, so the main part must be adjustable. On desktop this is easy accomplishable in CSS trough: height: calc(100vh – 200px). On mobile however, 100vh does not include the URL bar. Therefore, I used JavaScript. Basically, I am checking if the device used is a mobile one. If so, I use window.innerheight and subtract 200px from it. That fixes the issue, at least on some mobile browsers. And here is where the fun begins: On Brave-Android it works as expected. On Firefox-Android however, it does not work at all. There are two white stripes on the site. One under the iframe that holds the header and the other at the very bottom of the site. I have added two screenshots to this question. One screenshot shows how it is supposed to look, the other one shows the problem I am facing. If you want to check out the code, I did upload everything to GitHub. The site itself is in German, but all the variable are in English. https://github.com/SponsoredByHartz4/Website-Pennefete-public Thanks :).