html - iPad 上内容下方的空白

Question

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

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 属性在高分辨率屏幕上为您提供更多空白。