如何在 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

有一个黑客的解决方法，但它需要使用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

CSS只能使用负边距。 这会尝试针对移动浏览器。 如果桌面浏览器的大小很小并且在小窗口桌面镶边上不能正确执行，它也会捕获桌面浏览器，但它通常足够好。

.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>

Answer 3

如果你的问题是div没有显示，你需要放置宽度属性和背景色(图像(属性，如果你没有这个，div不会显示。

希望我能帮到你