背景宽度+页脚拉伸超过应有的程度

Question

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

页脚也比Firefox更加长实，但在IE和Chrome中都可以。

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

Answer 1

该网站存在一些沉重的设计问题......

但如果我忽略它们并且只是以最简单和最脏的方式解决手头的问题，我建议将这个CSS添加到底部：

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

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

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中，宽度与min-width几乎相同。