很多<body>空间留在页面的右侧？

只是做一个快速的布局模板，并遇到了我似乎无法解决的问题。最后，我在页面的右侧留下了一堆空的主体颜色，即使其他地方的其他东西都排得很好。我看到过类似的问题，看起来是由于相对定位，但我也使用浮动来制作主体列，因此我不确定是否是这样。很多<body>空间留在页面的右侧？

我有我的页面jsFiddle（请原谅重叠的元素，他们已经严重损坏，没有明显的原因）在http://jsfiddle.net/Cwca22/ueqGB/ - 任何帮助非常感谢，我怎么可以删除多余的空间。

我有一个容器，用于我的页面内容<body>，样式为960像素宽，高度为100％ - 不知道是否可能是导致我所有挫折的问题。我对容器CSS是：

#pageBase { 
    width: 960px; 
    height: 100%; 
    background-color: #fafafa; 
    margin: 0 auto; 
    margin-top: -20px; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); 
} 

body { 
    background-color: #e5e5e5; 
} 

#contentContainer { 
    width: 960px; 
}

和相关的HTML被称呼为<body><div id="pageBase">[Header content]<div id="contentContainer">[Body content]</div></div></body>。

在此先感谢。

来源

2012-11-04 Cody Capella

你有几个未关闭的div标签，并有

与class="sectionHeader"的div宽度为670px。但是你也可以在Recent Photo的栏中使用sectionHeader类。这使得最近的照片的边栏至少670px宽，这导致了额外的空间在右边。

要查看此部分页眉的实际影响，请将以下样式应用于它：background-color: red;。你会看到两个红色的DIV，正确的就是这个问题。

也许你会想为sectionHeader创建一个单独的类。一个用于content-page中的sectionHeader，另一个用于侧栏：'sectionSidebarHeader'。本节的SidebarHeader应具有较低的宽度，例如250px。

另外你的CSS有点怪异和相当复杂，也许你应该重写它。而且jsFiddle中的HTML也不正确，在一些结束标签的斜线后面有一些空格：</div>。

来源

2013-01-14 13:01:42 Yeti

很多<body>空间留在页面的右侧？

回答

相关问题