-1

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

2 回答 2

0

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

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

将所有内容放在中间div，然后给它一个垂直重复的背景图像（background-repeat: repeat-y）。当内容量增加时，中间div会变高，背景会垂直重复以匹配，所以你永远不会有间隙。

于 2012-10-01T21:06:33.163 回答
0

您的身高 (top和bottom) 在较大的容器中加起来不超过 528 像素；但是，它们在较小的一个中确实加起来为 428。

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

于 2012-10-01T21:06:48.170 回答