我遇到了问题，需要一些帮助。
我有一些看起来很好的嵌套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
答案 0 :(得分：0)
您链接的图片无法正常工作，因此我认为您的问题在于标题与第一个p元素之间的空白量。我通过删除标题高度来修复此问题，这导致它占用了大量的空白区域，并且我减少了底部边距，这也增加了空白区域。
html, body {
margin: 0;
padding: 0;
}
#wrap {
width: 1024px;
margin: auto;
}
#header {
width: 982px;
/* Removed height: 98px; */
margin: auto;
/* added margin-bottom*/
margin-bottom: -2%;
}
#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>
</div>
</div>
</div>
</div>