如何防止切割背景？

Question

我在＃section-content中设置了背景图片，背景是repeat-x，在＃section-footer中设置了背景颜色。问题是背景会被最初看到的空间量减少。

有什么方法可以解决这个问题吗？

有图像有问题，你可以看到当分辨率或窗口小时切断页脚背景颜色并向右滚动...

Problem image

Answer 1

您需要为页脚定义最小宽度。考虑一下主页包装器的宽度：980px; 然后分配 min-width：980px;到页脚元素。当您调整浏览器窗口的大小时，您的页脚会知道即使页面获得水平滚动，他也必须将背景重复到指定的最小宽度。

Answer 2

我的html结构看起来像这样

<div id="page">
    <div id="section-header">
    ...
    </div>
    <div id="section-content">
    ...
    </div>
    <div id="section-footer">
    ...
    </div>
</div>

所以我添加到css

#page {
    margin: auto;
    overflow: hidden;
    min-width: 1180px; /* it fits on my site */
}

问题解决了......