页脚背景图像在更改窗口宽度时会缩小

Question

我有一个为网站创建的页脚，但出于某种原因，当我改变窗口的宽度时，背景图像似乎在整个右侧消失，因为我缩小了窗口的宽度。

页脚应该在屏幕底部伸展100％并且这样做直到我开始将窗口的宽度缩小到某一点。

您可以看到我的问题示例Here

任何想法如何解决这个问题？我完全难过了。也许我的宽度出了问题？

Answer 1

#footer的宽度设置为auto，（#content-wrapper）内的内容具有固定的宽度。

这会导致水平条出现。

要解决此问题，您可以将overflow:hidden设置为父div（#footer）。

试试这个：

#footer {
    background-image: url("images/footer-bg.png");
    background-repeat: repeat-x;
    height: 451px;
    margin: auto 0;
    width: 100%;

    overflow: hidden; //What you're looking for.
}

如果您还希望内部div（#content-wrapper）动态调整自身大小，请使用百分比，而不是宽度的像素尺寸：

#footer #content-wrapper {
    height: 451px;
    margin: auto;
    width: 83%;
}

Answer 2

您好我已经检查了您的演示页面，您已经定义了页脚width 1265px，现在

比定义最小宽度html或body就像这样

body, html {
    min-width: 1265px;
}

因为您的页脚定义了最大宽度为1265，所以您定义 same width body or html