Question

我有一个“内容div”和里面有两个div与背景图像（渐变和阴影）。现在我有一个以下问题，如果有很多的内容我必须调整我的“内容div”但是当我这样做时 BIG GAP 显示在我的div（顶部和底部div）之间。我知道我可以通过插入更大的图像来解决它，但对我来说这是不行的，因为我必须在内容div变大时每次重新调整图像。

有没有办法解决这个问题？ 谢谢你的家伙!!!

Fiddle WITH LESS CONTENT（没有重新调整div，所以它看起来很好）

Fiddle WITH MORE CONTENT调整了我的“内容div”并且中间有一个间隙:(

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="author" content="Dejan Peic"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title></title>

</head>
<body>

<div class="mainwrap">
<div class="content">
<p><b>LESS CONTENT LOOKS OK!!!</p>
<div class="top">
</div>

<div class="bottom">
</div>
</div><!--/content-->
</div>
</body>
</html>

CSS代码：

*{margin:0px;padding:0px}

.content{
background-color:white;
position:relative;
display:block;
width:995px;
height:528px;
margin:0px auto;
margin-top:40px;
margin-bottom:40px;
z-index:100;
overflow:hidden;
}

.top{
position:absolute;
z-index:-100;
background-image:url('http://www.robertpeic.com/Global%20one/template/content-top.png');
top:0;
width:990px;
height:203px;
background-size: contain;
}

.bottom{
position:absolute;
z-index:-100;
background-image:url('http://www.robertpeic.com/Global%20one/template/content-bottom.png');
bottom:0;
width:989px;
height:225px;
background-size: contain;
}

p{
margin-left:50px;
margin-top:20px;
font-size:25px;
}

Answer 1

将背景图像分为三部分而不是两部分：

<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

将所有内容放在中间div，然后为其提供一个垂直重复的背景图像（background-repeat: repeat-y）。当内容量增加时，中间div将变得更高，背景将垂直重复以匹配，因此您将永远不会有差距。

Answer 2

您的高度（top和bottom）在较大的容器中最多不超过528像素;但是，它们在较小的一个中总计达到428个。

如果有任何方法可以消除CSS中定义高度的需要，你可能想要追求它 - 以帮助消除这样的怪癖。

如何解决我的内容div中的差距？

2 个答案: