CSS3 100vh在移动浏览器中不是常量
我有一个非常奇怪的问题。在每个浏览器和移动版本中，我都会遇到这样的行为：
- 当您加载页面(例如显示地址栏)时，所有浏览器都有一个顶部菜单，当您开始滚动页面时，该菜单会向上滑动。
- 100vh有时仅在视口的可见部分计算，因此当浏览器栏向上滑动100vh时，
- 所有布局都会增加(以像素为单位)，并重新绘制和调整所有布局，因为尺寸发生了变化
- 对用户体验产生了不好的跳跃效果
<代码>F29>
如何避免这个问题？当我第一次听说viewport-height的时候，我很兴奋，我想我可以把它用在固定高度的块上，而不是使用javascript，但现在我认为唯一的方法就是使用javascript的一些resize事件……
你可以在sample site上看到这个问题。
有没有人能帮我/推荐一个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>
<!-- this input highlight if resize event is fired -->
<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>
回答 29
Stack Overflow用户
发布于 2016-05-09 18:28:08
不幸的是，这是故意的…
这是一个众所周知的问题(至少在safari mobile中)，这是故意的，因为它可以防止其他问题。Benjamin Poulain replied to a webkit bug
这完全是故意的。为了达到这个效果，我们做了相当多的工作。:)
基本问题是:可见区域在滚动时动态变化。如果我们相应地更新CSS视区高度，我们需要在滚动期间更新布局。这不仅看起来像狗屎，而且在大多数页面中以60fps的速度运行几乎是不可能的(60fps是iOS的基准帧率)。
很难向你展示“看起来像狗屎”的部分，但想象一下，当你滚动时，内容会移动，屏幕上你想要的东西也在不断地移动。
动态更新高度不起作用，我们有几个选择:在iOS上放置视口单位，像iOS 8之前那样匹配文档大小，使用小视图大小，使用大视图大小。
从我们拥有的数据来看，使用较大的视图大小是最好的折衷方案。大多数使用视窗单元的网站在大多数情况下看起来都很棒。
Nicolas Hoizey对此进行了大量研究：https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
无修复计划的
此时，除了避免在移动设备上使用视口高度之外，您没有什么可做的。Chrome在2016年也改成了这样：
Stack Overflow用户
发布于 2019-03-05 21:27:00
你可以在你的css中尝试min-height: -webkit-fill-available;而不是100vh。它应该被解决
Stack Overflow用户
发布于 2018-06-04 22:44:06
在我的应用程序中，我是这样做的(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 mobile和ipad上运行。不起作用的是，当你将你的应用程序添加到iOS的主屏幕上，并多次改变方向--不知何故，缩放级别扰乱了innerHeight的值，如果我找到解决方案，我可能会发布更新。
https://stackoverflow.com/questions/37112218
复制相似问题
腾讯云开发者
