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>

当前回答

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

CSS:

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

HTML:

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

2021-07-07 17:31:06

其他回答

在移动设备上使用vh不适合100vh，因为他们的设计选择使用整个设备的高度，不包括任何地址栏等。

如果你正在寻找一个布局，包括div高度成比例的真实视图高度，我使用以下纯css解决方案:

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

你有两个选项来设置视口高度，手动设置——devHeight为一个工作的高度(但是你需要为你正在编码的每种类型的设备输入这个值)

使用javascript获取窗口高度，然后在加载和刷新视口时更新——devheight(然而这需要使用javascript，不是一个纯css解决方案)

一旦你获得正确的视图高度，你可以创建多个div在总视口高度的确切百分比，只需改变乘数在每个div你分配的高度。

0.10 =视图高度的10% 0.57 =视图高度的57%

希望这可以帮助到一些人;)

2019-04-03 13:31:31

Brave浏览器在iOS上的表现不同(有bug ?)它根据显示/隐藏地址栏动态改变视口高度。这有点烦人，因为它改变页面的布局取决于vw/vh单位。

Chrome和Safari都没问题。

2021-01-23 15:54:44

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

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

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

我能用吗?

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

2022-05-15 02:01:23

问题:

if ( refDOM.clientHeight != window.innerHeight )

解决方案:

refDOM.style.setProperty('--MYvh', window.innerHeight + 'px' ) ;

完成:

const mobileShit = function ( refDOM ) {
    console.log ( `refDOM.clientHeight : ${refDOM.clientHeight}` ) ;
    console.log ( `window.innerHeight : ${window.innerHeight}` ) ;
    if ( refDOM.clientHeight != window.innerHeight ) { // accounting for mobile
        refDOM.style.setProperty('--MYvh', window.innerHeight + 'px' ) ;
    }
} ;

CSS(通过脚本修改，是的，当任何事情发生变化时，你必须处理事件):

:root {
    --MYvh : 100vh ;
}

2022-07-29 22:09:47

因为它不会被修复，你可以这样做:

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

对我来说，这是比JavaScript更快、更纯粹的解决方案，因为JavaScript无法在许多设备和浏览器上运行。

只要使用合适的vh值就可以了。

2018-11-09 13:25:48

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

推荐文章

最新文章

标签