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

Does this answer your question? [100vh height when address bar is shown - Chrome Mobile](https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile) — Andris Jefimovs, Jan 21 '21 at 19:45
What is your HTML main structure and the css that goes along with it ? what method do you use to lay ... your layout ? grid/flex/position, else ? there might option that won't need to use cal() nor 100vh ... — G-Cyrillus, Jan 21 '21 at 20:09

score 0 · Answer 1 · answered Jan 21 '21 at 20:23

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>

Sizing main viewport for firefox mobile

1 Answers1