Question

只是制作一个快速的布局模板，并遇到了一个我似乎无法解决的问题。我最终在页面的右侧有一堆空的身体颜色，即使其他地方的所有其他部分排列得很好。我看到过类似的问题，看起来这是由于相对定位，但我也使用花车制作身体柱，所以不确定是不是。

我有一个jsFiddle of my page（请原谅重叠的元素，它们在http://jsfiddle.net/Cwca22/ueqGB/被严重破坏） - 任何帮助都非常感谢我如何删除多余的空间。< / p>

我的页面内容容器为<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>。

提前致谢。

Answer 1

class="sectionHeader"的div宽度为670像素。但是你也可以在Recent Photo的栏中使用sectionHeader类。这使得最近照片的侧边栏宽度至少为670像素，这会在右侧产生额外的间距。

要查看此sectionHeader的实际影响，请对其应用以下样式：background-color: red;。你会看到两个红色DIV，右边是问题。

您可能希望为sectionHeader创建一个单独的类。一个用于内容页面中的sectionHeader，另一个用于侧边栏：'sectionSidebarHeader'。此部分SidebarHeader应具有较低的宽度，例如250px。

你的CSS也有点奇怪而且非常复杂，也许你应该重写它。并且jsFiddle中的HTML也不正确，在一些结束标记的斜杠之后有一些空格：</div>。

页面右侧留下了很多空间？

1 个答案: