Question

我正在某些iOS设备（iPad，iPhone）上测试自适应网站，并注意到以下问题。

我有一个左侧边栏，其样式如下：

position: fixed;
top: 0;
left: 0;
width: 60px;
height: 100%

当我第一次加载页面时，Safari或一般任何浏览器地址栏都是~100px，然后当用户向下滚动时，地址栏会折叠到接近~40px的位置。

然而，在用户开始滚动的时间和页面停止滚动的时间之间，有60px的间隙，我不能用与元素相同的颜色填充，因此身体的背景颜色显示通过。这是一个演示截图：

页面加载时 - 看起来不错：http://f.cl.ly/items/2C3W1N3e1k1w0P2v051A/load.png

滚动时：http://f.cl.ly/items/2S3v3Y3b3y3e3l251J0v/scrolling.jpg

我已经尝试将元素的高度增加到60px，以弥补这个或添加填充，但似乎没有什么可以解决这个问题。

在页面加载...

if ($('html').hasClass('touch')) {
  var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  $('.sidebar').find('.strip').height(winHeight + 60);
}

任何建议或人们的经历类似吗？

固定触摸设备（iOS）上的100％高度元素并调整高度

0 个答案: