很多<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>空間留在頁面的右側？

回答

相關問題