CSS3 100vh在移动浏览器中不稳定

我有一个很奇怪的问题…在每个浏览器和手机版本中，我都遇到了这种行为:

当你加载页面时，所有的浏览器都有一个顶部菜单(例如显示地址栏)，当你开始滚动页面时，它会向上滑动。 100vh有时只在视口的可见部分计算，所以当浏览器栏向上滑动时，100vh增加(以像素计算)。所有布局重新油漆和重新调整，因为尺寸已经改变对用户体验有不好的跳跃效果

如何避免这个问题?当我第一次听说viewport-height时，我很兴奋，我认为我可以使用它来固定高度块，而不是使用javascript，但现在我认为唯一的方法实际上是javascript与一些调整大小事件…

您可以在:示例站点看到问题

有人能帮助我/建议一个CSS解决方案吗?

简单测试代码:

/* maybe i can track the issue whe it occours... */ $(function(){ var resized = -1; $(window).resize(function(){ $('#currenth').val( $('.vhbox').eq(1).height() ); if (++resized) $('#currenth').css('background:#00c'); }) .resize(); }) *{ margin:0; padding:0; } /* this is the box which should keep constant the height... min-height to allow content to be taller than viewport if too much text */ .vhbox{ min-height:100vh; position:relative; } .vhbox .t{ display:table; position:relative; width:100%; height:100vh; } .vhbox .c{ height:100%; display:table-cell; vertical-align:middle; text-align:center; } <div class="vhbox" style="background-color:#c00"> <div class="t"><div class="c"> this div height should be 100% of viewport and keep this height when scrolling page <br>  <input type="text" id="currenth"> </div></div> </div> <div class="vhbox" style="background-color:#0c0"> <div class="t"><div class="c"> this div height should be 100% of viewport and keep this height when scrolling page </div></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

当前回答

我们有新的视口单元lvh, svh和dvh来拯救。这在最新的谷歌I/O 2022网络作品视频中得到了证明。

您可能希望继续使用dvh，以便浏览器在滚动时适应移动设备的隐藏选项卡。它的工作方式类似于宽度dvw, lvw和svw单位。

这是视频中的一个简洁的插图:https://youtu.be/Xy9ZXRRgpLk?t=982

我能用吗?

这是目前工作在我的Chrome金丝雀与标志“实验功能”启用。

2022-05-15 02:01:23

其他回答

VH 100在移动设备上表现不佳，因为它没有考虑iOS栏(或其他平台上的类似功能)。

一个很好的解决方案是使用JavaScript的"window.innerHeight"。

简单地将元素的高度赋给这个值。 $ (' .element-name ') .height (window.innerHeight);

注意:在JS中创建一个函数可能很有用，这样当屏幕调整大小时，高度就可以改变。但是，我建议只在屏幕宽度改变时调用该函数，这样当用户向下滚动页面时iOS栏消失时，元素的高度就不会跳跃。

2020-11-26 13:29:45

下面的代码(使用jQuery)解决了这个问题。

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

其他元素用%作为单位来代替vh。

2018-10-28 14:54:29

当我在寻找一个解决方案的时候，这里是我的每个人使用VueJS与Vuetify(我的解决方案使用v-app-bar, v-navigation-drawer和v-footer): 我创建了App.scss(在App.vue中使用)，内容如下:

.v-application { 身高:100 vh; 高度:-webkit-fill-available; ｝ .v-application——包装{ Min-height: 100vh ! important: -webkit-fill-available; ｝

2020-04-08 07:08:06

对我来说，这种把戏成了一种工作:

height: calc(100vh - calc(100vh - 100%))

2020-03-18 07:55:11

不幸的是，这个问题至今仍然存在。最大的误导是不可能用浏览器的设备工具栏来表示情况。

我刚刚解决了这个问题(在PC、iOS和android浏览器上进行了测试):

.your_class {
   height: 100vh,
   max-height: 100%, // <-- add the line
   ...some other props,
}

我希望它能节省你的时间。

2022-06-07 11:13:11

CSS3 100vh在移动浏览器中不稳定

推荐文章

最新文章

标签