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>

当前回答

我提出了一个React组件——如果你使用React，请查看它，如果你不使用React，请浏览源代码，这样你就可以使它适应你的环境。

它将全屏div的高度设置为window。innerHeight，然后在窗口调整大小时更新它。

2018-05-28 07:37:15

其他回答

你可以试试min-height: -webkit-fill-available;而不是100vh。应该得到解决

2019-03-05 13:27:00

我通过将最外层的div放在position: absolute，然后设置高度为100%来解决这个问题:

CSS:

.outer {
    position: absolute;
    height: 100%;
}

HTML:

<div class="outer">
    <!-- content -->
</div>

2021-07-07 17:31:06

看起来CSS修复是不可靠的，JS一个工作得很好，但元素在用户打开页面时跳跃。

我解决了这个问题使用JS从其他答案+淡出动画隐藏跳跃。

这并不适合所有的用例，但对于其中一些用例，比如必须在底部的按钮，可能是一个很好的解决方案。

2021-08-26 19:16:49

在我的应用程序，我这样做(typescript和嵌套postcss，所以改变相应的代码):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

在你的css中:

:root {
    --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

它至少可以在chrome手机和ipad上运行。不工作的是，当你添加你的应用程序到iOS的主屏幕上，并改变方向几次-以某种方式缩放级别混乱的innerHeight值，我可能会发布一个更新，如果我找到一个解决方案。

Demo

2018-06-04 14:44:06

关于这个问题及其可能的解决方案可以在这篇博客文章中找到:在100vh布局中寻址iOS地址栏

我最终在我的React应用程序中的解决方案是利用上面帖子中描述的React -div-100vh库。

2020-11-27 12:47:16

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

推荐文章

最新文章

标签