如何解決我內容div中的空白？

-1

我有一個「content div」和裏面有有兩個div與背景圖像（漸變和陰影）。現在我有一個下面的問題，如果有lot的內容我不得不調整我的「內容div」的大小，但當我這樣做時，我的div（頂部和底部div）之間顯示BIG GAP。我知道我可以通過插入更大的圖像來解決它，但對我來說這是不可行的，因爲當內容div變大時，我必須調整圖像的大小，每次。

有什麼辦法可以解決這個問題嗎？ 謝謝你的傢伙！

Fiddle WITH LESS CONTENT（沒有重新調整DIV所以它看起來的好）

Fiddle WITH MORE CONTENT調整大小我「內容的div」並且在中間:(如何解決我內容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; 
}

來源

2012-10-01 Dejo Dekic

1）你可以將容器設置爲固定大小，並在其中有一個垂直滾動2）你可以有一個重複背景的內容3）你可以重新創建沒有圖像的影子，只使用CSS，這是最好的方式來做到這一點 – Caelea

鴻溝背景IM年齡分爲三個部分，而不是兩個：

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

將所有中間div您的內容，然後給它的是垂直重複背景圖像（background-repeat: repeat-y）。當內容數量增加時，中間的div將變得更高，背景將垂直重複以匹配，所以你永遠不會有差距。

來源

2012-10-01 21:06:33 daGUY

在較大的容器中，您的高度（top和bottom）不會加起來爲528px;然而，它們在小一點上總計爲428。

如果有什麼方法可以消除CSS中定義高度的需求，您可能需要追求它 - 以幫助消除這樣的怪癖。

來源

2012-10-01 21:06:48 Dawson

如何解決我內容div中的空白？

回答

相關問題