next.js 为什么safari要剪半页？

rbpvctlc 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(75)

当我在Safari浏览器中检查我的网站时，如果我使用浏览器访问的第一个页面，如果该页面的内容的总大小小于100 vh，Safari会剪切页面并显示页面的一半。当我在CSS中将min-height设置为110 vh时，我的问题就解决了。有没有人有更好的解决方案，或者知道为什么会发生这种情况，或者你曾经在你的项目中使用过这种方法？

next.js

来源：https://stackoverflow.com/questions/76718851/why-safari-cut-half-page

1条答案

按热度按时间

uxh89sit1#

safari在计算vh中的量时有一个奇怪的行为。Safari会计算URL选项卡和任何工具栏的大小。
到目前为止，唯一的方法是动态计算高度。

.my-element {
    height: calc(var(--vh, 1vh) * 100);
}

字符串
或者在JavaScript中的resize事件上

$(window).resize(function(){
    var vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

型

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 为什么safari要剪半页？

1条答案

相关问题

热门标签

最新问答