如何对 css 中供应商前缀的属性执行计算功能？

Question

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

解决此问题的方法是使用 -webkit-fill-available。但是，我的导航栏和汉堡菜单行的 CSS 是：

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

对于导航菜单分区...

 .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;
  // Multiplied by 0.01 to get a percentage value
  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);
}

Answer 2

如果您的问题是 div 没有显示，您是否需要放置 width 属性和（图像的）背景颜色属性，如果没有这个属性，则 div 不会显示。

希望我能帮助你