Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Weird white stripes on Firefox Android

  • Tsisy valiny
  • 0 manana an'ity olana ity
  • 6 views
more options

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 :).

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 :).
Sarin'efijery napaingotra

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.