html - 网页右侧出现奇怪的空白

Question

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

我的直觉是问题出在：

 #Navigation_Container {

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

}

非常感谢您的帮助。

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

score 2 · Accepted Answer

我发现了这个问题......它在页脚中的“.notice”类中......如果你删除

position:absolute;

它工作得很好。：）看看这个！小提琴

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

在此处输入图像描述

此外，如果您需要它绝对定位在底部，请确保也像这样放置左侧位置

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

这是一个添加了 left:0px 的示例

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

将其从导航容器中取出修复了空白区域，但您至少在其他地方完成了它。

score 0 · Accepted Answer

0

添加到你的 CSS

body{margin:0;}

于 2012-11-17T20:53:02.100 回答

4 回答 4