背景色/图像未覆盖移动设备上的div宽度

Question

（仅在移动设备上：android，ios）

我不太确定这是怎么回事，但我确实知道顶部的background-color没有覆盖整个div长度。 同样，页脚附近的background-images也不居中。 我尝试了许多不同的方法来解决此问题，但看起来顶部的背景颜色问题和页脚的背景图像问题是相关的，因为它们都有相似的“截止”点。

这两个元素共享相似的代码。 绝对以居中的内部div定位的父div。 任何见识都会很棒。

网站在这里 。

更新 ：我试图在此处在jsFiddle上复制该问题（提醒：使用移动浏览器）： http : //jsfiddle.net/zmwgg279/2/

Answer 1

您的问题是您为包装器元素指定了冲突的width 。

这是小提琴

您的第一个元素#seascape-infobar的width为100% ，非常适合响应式布局。 出现问题的地方是，您要强迫子元素比其显示的屏幕更宽。 这是您的代码的简化版本：

的HTML

<div id="seascape-infobar">
    <div class="wrap"></div>
</div>

的CSS

#seascape-infobar {
    width: 100%;
}
#seascape-infobar .wrap {
    margin: 0 auto;
    width: 980px; /* What happens when this is wider than the screen? Break! */
}

当您查看此上移动，它有一个屏幕宽度小于 980px ，父包装#seascape-infobar仍然会正确地适应屏幕宽度，但子元素.wrap将被迫溢出到980px 。

这里最安全的做法是确保使用%或ems等相对单位指定所有宽度。 这样，内容就可以根据查看的内容进行干净的调整。