如何在css中对供应商前缀属性执行calc函数？

gcuhipw9 于 2023-05-02 发布在其他

关注(0)|答案(3)|浏览(136)

我必须建立一个导航栏，从屏幕的右侧滑动。它必须覆盖整个屏幕。问题是，移动的中，像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中是不可能的。
是否有变通方法？

css

来源：https://stackoverflow.com/questions/62114804/how-to-do-calc-function-on-vendor-prefixed-properties-in-css

3条答案

按热度按时间

h4cxqtbf1#

这里有一个非常简单的解决方法，但是它需要使用Javascript来辅助CSS。这里有很好的描述： www.example.com
在你的网站中，你需要添加这个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);
}

赞(0）回复(0）举报 2023-05-02

jhdbpxl92#

CSS只能使用负边距。这试图针对移动的浏览器。如果桌面浏览器的尺寸很小，并且在小窗口桌面chrome上的表现不佳，它也会捕获桌面浏览器，但它通常足够好。

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

赞(0）回复(0）举报 2023-05-02

cotxawn73#

如果你的问题是div不显示，你需要把width属性和background-color（of image）属性，如果你没有这个，div不显示。
希望我能帮到你

赞(0）回复(0）举报 2023-05-02

我来回答

如何在css中对供应商前缀属性执行calc函数？

3条答案

相关问题

热门标签

最新问答