html - Sizing main viewport for firefox mobile

Question

I've been looking for a way to size the main viewport in mobile to accommodate for the navigation bar at the bottom of the page. I want all the content to be visible in between the top of the page and the top of the navigation bar (CSS3 100vh not constant in mobile browser)

This code works for me in all desktop browsers, and all mobile browsers except for firefox

      html,
      body {
        height: 100%;
      }
      #hero {
        height: calc(100vh - calc(100vh - 100%));
        background-color: aqua;
      }

How come I'm getting different behaviour in firefox mobile? Thanks for looking

question from:https://stackoverflow.com/questions/65833892/sizing-main-viewport-for-firefox-mobile

Answer 1

while awaiting for clarification, here is a sample/template that could do what you look for via grid (it could be flex if you feel more confident with it).

html,
body,
body > div {
  height: 100%;
  margin: 0;
}
body > div {
  display: grid;
  grid-template-rows: 1fr auto;
}
nav {
  background: blue;
  padding: 1em;
  order: 1;
}
main {
  overflow: auto;
}

<div>
  <nav>At the bottom , of any height.</nav>
  <main> let me scroll if too <br><br><br><br><br><br><br><br>...<br><br><br><br><br><br><br>....<br><br><br><br><br><br><br><br>....<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>....<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>....<br><br><br><br><br><br><br><br><br><br>....short</main>
</div>