I have to build a navbar that slides from the right side of the screen. It has to cover the whole screen. The problem is that in mobile phones, browsers like chrome have this toolbar at the bottom, which hides some part of the page. Which is not feasible as I also have to display some contact information at the bottom.

The fix for this was using -webkit-fill-available. But, the css for my navbar and the hamburger menu row is :

.hamburger-row {
   position: fixed;
   height: 75px;
}

And for navigation menu div...

 .nav-menu-div {
    position: fixed;
    height: calc(100vh - 75px);
 }

But to introduce -webkit-fill-available, I have to do something like

 height: calc(-webkit-fill-available - 75px);

which is not possible in css.

Is there any workaround?

I have to build a navbar that slides from the right side of the screen. It has to cover the whole screen. The problem is that in mobile phones, browsers like chrome have this toolbar at the bottom, which hides some part of the page. Which is not feasible as I also have to display some contact information at the bottom.

The fix for this was using -webkit-fill-available. But, the css for my navbar and the hamburger menu row is :

.hamburger-row {
   position: fixed;
   height: 75px;
}

And for navigation menu div...

 .nav-menu-div {
    position: fixed;
    height: calc(100vh - 75px);
 }

But to introduce -webkit-fill-available, I have to do something like

 height: calc(-webkit-fill-available - 75px);

which is not possible in css.

Is there any workaround?

• javascript
• html
• css

• 1 Nope calc requires a value and you don't have one. – Paulie_D Commented May 31, 2020 at 10:34

4 Answers 4

There's a hacky workaround but it needs to use Javascript to aid CSS. It's been well described here: https://css-tricks./the-trick-to-viewport-units-on-mobile/#css-custom-properties-the-trick-to-correct-sizing

In your website you need to add this JS:

function appHeight() {
  const doc = document.documentElement;
  // Multiplied by 0.01 to get a percentage value
  doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
}

window.addEventListener('resize', appHeight);
appHeight();

and for your case in CSS it will look like:

.nav-menu-div {
    position: fixed;
    height: calc(100vh - 75px);
    height: calc(calc(var(--vh, 1vh) * 100) - 75px);
}

CSS only work around using a negative margin. This tries to target mobile browsers. It will catch desktop browsers too if they are sized small and doesn't perform right on small window desktop chrome, but it generally good enough.

.wrapper {
  min-height: 100vh;
  margin-bottom: -150px;
  padding-bottom: 150px;

   }


@media only screen and (max-device-width: 480px) {
    .wrapper {
       min-height: -webkit-fill-available;
    }
}
.footer {
  height: 150px;
}

<div class="wrapper">
  Main Content
</div>
<div class="footer">
  Footer
</div>

The 2024 answer for the specific use case you asked for -webkit-fill-available should look like this:

Use 100dvh instead. It's the new unit introduced for dynamic viewport units and is supported by all major browsers.

While we still do not have a 99% coverage yet, I would remend introducing it with a fallback still like this:

.nav-menu-div {
    position: fixed;
    height: calc(100vh - 75px);
    height: calc(100dvh - 75px);
}

Also you might have a look at this blog post for more details in a pact format.

if your problem is that the div isn't showing do you need to put the width property and the background-color (of image) property , if you don't have this, the div isn't showing.

Hope I help you