html - 背景宽度 + 页脚的拉伸(stretch)超出了应有的范围

Question

我有这个网站:http://www.ryansammut.com/orijen/contact.html .

页脚也比 Firefox 中应有的长度更长，但在 IE 和 Chrome 中没问题。

当我放大很多并向右滚动时，背景也会消失。

Answer 1

该站点存在一些严重的设计问题...

但如果我要忽略它们并以最简单和最肮脏的方式解决手头的问题，我建议将此 CSS 添加到底部:

body {
    margin: 0 auto;
    width: 1280px;
}

由于我不能把所有的时间都花在你的工作上，我能做的最多就是为 future 提供建议:)

1. 减少你的整体宽度网站大约 984px 到适应更多屏幕尺寸。
2. 重新设计容器箱布局，如果你有的话，把它们画在纸上到。
3. 阅读有关适应性增长的内容，CSS 中的收缩以适合宽度以及如何触发他们
4. 使用相对定位并避免如果您使用左/右没有经验。
5. 安装 Firebug 并试验CSS 使用它。

编辑:

一个接一个地制作 3 个 div，宽度为自动(默认)。

称它们为#header、#content、#footer

给每个 div 一个子 div，带有一个类 .sub 并给它们与它的父级相同的背景。

使 .sub 类具有所需的宽度 (1280px) 并使其在 3 之间保持相等。

给.sub类 margin:0 auto;

因此您的站点结构将如下所示:

<div id="header">
    <div class="sub"></div>
</div>
<div id="content">
    <div class="sub"></div>
</div>
<div id="footer">
    <div class="sub"></div>
</div>

你的 CSS 是这样的:

#header,
#content,
#footer {
    width:auto;/*not necessary as it's the default value anyway*/
    position:relative;/*not necessary but will help later on*/
}
#header .sub,
#content .sub,
#footer .sub {
    width:1280px;
    margin:0 auto;
}
#header,
#header .sub {
    background:whatever1;
}
#content,
#content .sub {
    background:whatever2;
}
#footer,
#footer .sub {
    background:whatever3;
}

这是你想要的吗？

或者，如果您不想更改网站的 html，可以尝试使用最小宽度。在 IE6 中，width 几乎与 min-width 相同。