0
我遇到問題，需要一些幫助。嵌套Div不能正確堆疊內容
我有，看起來細一些的嵌套的div - 只要沒有內容。一旦我添加了一些測試文本，由於頁面可能有很多內容，間距出現在div之上。這裏有一個鏈接到這個問題的截圖：
http://www.stephencamper.com/screenshot/screenshot.gif
...這裏是代碼的樣子：
html, body {
margin: 0;
padding: 0;
}
#wrap {
width: 1024px;
margin: auto;
}
#header {
width: 982px;
height: 98px;
margin: auto;
}
#body_container {
width: 982px;
}
#top_inner_bg {
width: 982px;
background: #FFF url(images/top_inner_bg.gif) no-repeat top; height: 9px;
}
#sides_inner_bg {
width: 982px;
background: #CCC url(images/vert_inner_bg.gif) repeat-x top; /* img ht is 2000px; it's supposed to fade transp after 770px; no sure if correct way to do this */
}
#bot_inner_bg {
margin: auto;
width: 980px;
height: 100%;
background: #E8E7E3;
}<div id="wrap">
<!-- header -->
<div id="header">
header here
</div>
<!-- body -->
<div id="body_container">
<div id="top_inner_bg"> </div>
<div id="sides_inner_bg">
<div id="bot_inner_bg">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>我找了一個解決方案，並發現一些邊緣溢出。我嘗試了溢出：隱藏，但沒有奏效。我的div也不漂浮，所以clearfix對我不起作用。當我爲div添加邊框時，它可以工作 - 但是，現在我有一個邊框，而我不需要邊框，因爲我需要側面圖像與top_inner_bg div無縫連接。
請幫忙！
謝謝。
-Stephen
你的截圖返回403錯誤頁面。 – 2010-02-27 11:50:38
我得到了404。你也可能想限制你的服務器出錯時瀏覽器吐出的東西。這樣更緊張。 – volvox 2010-02-27 12:05:19
這可能是由div上的css高度造成的 – GibboK 2015-02-14 14:37:17