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

Question

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

页脚应该在屏幕底部拉伸(stretch) 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%;
}