-1

「コンテンツ div」があり、その中に背景画像 (グラデーションと影) を持つ 2 つの div があります。多くのコンテンツがある場合、 「コンテンツ div」のサイズを変更する必要がありますが、これを行うと、div (上部と下部の div) の間に大きなギャップが表示されます。より大きな画像を挿入することで解決できることはわかっていますが、コンテンツ div が大きくなる たびに画像のサイズを変更する必要があるため、私には無理です。

これを解決する方法はありますか？君たちありがとう！！！

Fiddle WITH LESS CONTENT (div のサイズを変更していないので見栄えが良い)

Fiddle WITH MORE CONTENT Resized my「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

背景画像を 2 つではなく 3 つの部分に分割します。

<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) は、より大きなコンテナーでは最大 528px になりません。ただし、小さい方では合計 428 になります。

CSS で高さを定義する必要をなくす方法がある場合は、それを追求することをお勧めします。これは、このような癖をなくすのに役立ちます。

于 2012-10-01T21:06:48.170 に答える