iPad 上内容下方的间隙

Question

我设置了一个网页，中间有一些链接，在该网页下方，一个 div 浮动在右侧，大约占屏幕的 25%，另一个 div 带有position: fixed, left: 0, bottom: 0。在我的桌面上，在 Firefox 中，固定位置 div 内的图像位于左下角。但是，在 iPad 上，浮动的右 div 下方有很大的空隙。图片要么从屏幕视图下方开始，要么从页面下方开始，在图片顶部和最后一个文本块的底部之间存在巨大的内容间隙。

HTML：

  <div class="wrapper">
     <div id="containerLeft">
        <img id="ipad" src="images/ipad-small.png" alt="a picture of an ipad held in a hand" />
     </div> 

     <div id="containerRight">
        <article>
           <p> stuff </p>
           <p> more stuff </p>
        </article>
     </div>
  </div>

CSS：

    .wrapper{
    width: 100%;
    overflow: hidden;
}
/* ------------ Left Container Content - image ------------- */
#containerLeft{
    width: 50%;
    z-index:-9999; 
    overflow: hidden;
    float: left;
}

#containerLeft img{
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
}

/* ---------- Right Container Content - copy on the side ---------------- */
#containerRight{
    width: 25%;
    float: right;
    margin: 50px 3.854167% 0 0;
}

#containerRight article{
    width: 100%;
}

#containerRight article p{
    line-height: 140%;
    font-weight: 400;
    font-size: 0.45em;
    text-align: right;
    font-style: italic;
    overflow: visible;
    padding: 1%;
    margin: 2% 0 0;
}

谁能从中看出是什么导致了屏幕底部的大间隙？

Answer 1

这取决于您的屏幕分辨率。问题来了：

#containerLeft img{
position: fixed;
left: 0;
bottom: 0;
display: block;
}

底部属性在高分辨率屏幕上为您提供更多空白。