html – CSS3 100vh在移动浏览器中不变

前端之家收集整理的这篇文章主要介绍了html – CSS3 100vh在移动浏览器中不变前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个非常奇怪的问题…在每个浏览器和手机版本我遇到这种行为:

>当您开始滚动页面时,当您加载页面(显示地址栏)时,所有浏览器都有顶部菜单
> 100vh仅在视口的可见部分计算,所以当浏览器栏滑动100vh增加(以像素为单位)
>所有布局重新绘制并重新调整,因为尺寸已更改
>用户体验不好的跳跃效果

怎么可以避免这个问题?当我第一次听到viewport-height我很兴奋,我以为我可以使用它的固定高度块istead使用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 sould 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>

解决方法

不幸的是这是故意的…

这是一个很有知识的问题(至少在safari mobile),这是故意的,因为它可以防止其他问题。 Benjamin Poulain replied to a webkit bug

This is completely intentional. It took quite a bit of work on our part to achieve this effect. 原文链接:https://www.f2er.com/html/233130.html

猜你在找的HTML相关文章