在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;
}

bottom属性在高分辨率屏幕上为您提供了更多的空白。