奇怪的空白空间出现在网页的右侧

Question

我正在尝试构建一个在宽屏幕和小屏幕显示器中都应该显示相同的网页。我试图保持流畅，但同时在网页的右侧出现了奇怪的空白区域。 奇怪的是，空白区域在视口外部，但它会使水平屏幕栏显示，一旦滚动到最右侧，就可以看到白色空间。 可在此处查看代码http://jsfiddle.net/FW98q/

我的直觉是问题在于：

 #Navigation_Container {

    background: #3399cc;
    height: 50px;
    //width: 960px;
    //margin: 0 auto;

}

非常感谢帮助。

还有关于如何设置网页样式以使其在屏幕上保持一致的任何提示。也欢迎评论设计.. :)

Answer 1

我发现了这个问题....它位于页脚中的'.notice'中...如果你删除

position:absolute;

它运作得很好。 ：） 看看这个！ Fiddle

我在firefox中使用了元素检查器，看到它是唯一一个超出页面的元素。

另外，如果您需要将它放在底部绝对位置，请确保同样放置左侧位置

position: absolute;
bottom: 0px;
left:0px;

以下是左侧的示例：添加了0px

FIDDLE

Answer 2

#page_container, #Header {
    width: 960px;
}

如果您希望它们具有相同的宽度，请确保这两个元素的宽度与其他元素的宽度相同。

Answer 3

//在CSS中不起作用，你没有关闭你的一个div。我认为这是内容之一。为什么你有3个不同的页脚div？你的标记过于复杂，你可以将所有这三个结合起来并获得相同的效果。

只需从导航容器中取出即可修复空白区域，但至少在其他地方完成了此操作。

Answer 4

添加到您的CSS

<强> body{margin:0;}