How to do calc function on vendor-prefixed properties in css?

user_13217252 0
Viewed 1365

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?

css html javascript
3 Answers

There's a hacky workaround but it needs to use Javascript to aid CSS. It's been well described here: https://css-tricks.com/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;
  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);
}
user_62219310

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>

user_43872160

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

user_136072250
Related