javascript - 如何在 CSS 中对 vendor 前缀属性执行 calc 函数？

Question

我必须构建一个从屏幕右侧滑动的导航栏。它必须覆盖整个屏幕。问题是在手机中，像chrome这样的浏览器在底部有这个工具栏，它隐藏了页面的某些部分。这是不可行的，因为我还必须在底部显示一些联系信息。

对此的修复是使用 -webkit-fill-available。
但是，我的导航栏和汉堡菜单行的 CSS 是:

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

而对于导航菜单 div...

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

但是要引入-webkit-fill-available，我必须做类似的事情

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

这在 css 中是不可能的。

有什么解决方法吗？

Answer 1

有一个 hacky 解决方法，但它需要使用 Javascript 来帮助 CSS。这里有很好的描述:https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#css-custom-properties-the-trick-to-correct-sizing
在您的网站中，您需要添加此 JS:

function appHeight() {
  const doc = document.documentElement;
  doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
}

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

对于您在 CSS 中的情况，它看起来像:

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