html - 将背景图像扩展到整个页面......而不会滚动导致它中断

Question

我是网络开发的新手，但我在设计一些新的页眉/页脚时才意识到一些事情。当您将它们包装在一个容器中时，背景图像/颜色会延伸到整个页面，然后将网页的窗口缩小到小于预期的宽度，然后滚动以查看您在页面中看不到的内容较小的窗口，背景图像容器不再足够大(因为它自动调整到窗口的宽度，即使其中的内容溢出)，您看到空白而不是背景图像。

进入首页http://www.stumbleupon.com例如。缩小窗口，然后向右滚动。突然间，他们所有的背景图片都消失了。标题，正文，一切。只是在平面的默认颜色之上的内容。

有解决办法吗？这在网页设计中是否只是作为无关紧要的问题而被忽略？这似乎与我相当相关，尤其是在执行诸如同时查看多个选项卡/窗口之类的操作时，或者如果有人(上帝保佑)使用分辨率宽度小于 1024 的显示器。

Answer 1

StumbleUpon 刚刚对容器 div 粗心大意。他们设置了一个宽度为 100% 的容器 div，然后将其中的标题 div 设置为宽度的 100%。

<div id="container" style="width:100%">
    <div id="header" style="width:100%">
        Header Content
    </div>
</div>

容器 div 延伸到可见窗口宽度。然后，子 div 只会拉伸(stretch)到该 div 的宽度。如果您将 header 放在容器 div 之外，它将拉伸(stretch)到页面的整个宽度。

<div id="header" style="width:100%">
        Header Content
</div>
<div id="container" style="width:100%">

</div>

查看我的主页:http://smallhadroncollider.com以全宽标题为例。