CODEWITHSUNDEEP
javascripthtmlcss
Manish
Manish

Reputation: 133

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

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?

Upvotes: 7

Views: 3331

Answers (4)

Tim Nikischin
Tim Nikischin

Reputation: 818

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 recommend 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 compact format.

Upvotes: 0

Buszmen
Buszmen

Reputation: 2416

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;
  // 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);
}

Upvotes: 6

Chuck Holbrook
Chuck Holbrook

Reputation: 127

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>

Upvotes: 1

Felipe Garcia
Felipe Garcia

Reputation: 52

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

Upvotes: -2

Related Questions