当窗口调整为较小时，CSS填充到右侧

Question

我在档案和搜索页面的右侧有填充，我相信它与我的身体元素有关，但是我不太确定这些页面上的不同之处是来自网站上的其他页面因为它们都使用相同的格式，所以对于风格来说都很好。 It's a wordpress website.正如我所说，它只发生在这个页面上，搜索页面和所有其他页面都很好，所以我对它正在做的事情感到困惑。

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }

body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}

header { width: 960px; height: auto; margin: 0 auto; display: block;}

#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}

aside { width: 260px; height: auto; float: left; position: relative;}

#main { width: 650px; height: auto; float: right; position: relative;}

#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }

如果您减小窗口大小，您会注意到页面底部的滚动条显示，然后右侧的填充开始成形。如果你使窗口变大，那么填充空间就会消失，底部的滚动条会消失。我是否以任何方式限制了我的身体标签以实现这一目标？

我已经查看了这个，但我已经定义了最小宽度。 Website has strange whitespace on right side of the page when the browser is resized to a smaller window

Answer 1

在第108行的style.css文件中，从标题标记中删除width属性以修复水平滚动条问题。

修正了CSS：

header { height: auto; margin: 0 auto; display: block;}

要进行审核，3D View in Firefox浏览器会显示标题，因为灰色栏是问题的根源。创建文本的其他样式不受影响。

提示：右键单击上面的图像，然后在新标签中查看原始尺寸。

Answer 2

啊，如果我正确理解你的问题，那么标签header，特别是它的样式width: 960px似乎是导致这种特殊情况的原因。标题#main周围的包含div只有width: 650px。结果，标题的多余宽度导致它超出div的边缘。

它似乎只是在较小的屏幕宽度上显示为填充的原因是因为所有的#container周围的包含div以其边距为中心 - 因此过宽标题的效果赢了“ t变得明显，直到浏览器足够薄，使其右边缘开始与标题的右侧重叠。

不是通过从标题的样式中删除width: 960px来修复此问题（这可能会弄乱实际需要此标题宽度的网站），我建议为所有违规添加一个重写类标签，可能在.archive-header { width: auto; }的行上。但我想解决方案取决于你，因为你可能比我更了解网站。

我希望这有帮助！ （我真的这么做了，否则你已经读过所有这些了！对不起，如果你这样做了......）对于将来，请尝试下载Firebug for Mozilla Firefox，它有一个方便的元素检查器，可以让你玩弄元素的样式，看看有什么作用。它可以帮助您自己发现这些问题，因此您可以更快地解决它们。