頂部圖像，重複背景和底部圖像... HTML和CSS

Question

我在這裏有一個問題...我有一個Div和它的所謂的leftSideBar，裏面有兩個圖像，一個頂部和一個底部和這個div有一個repeat-y背景。它確實有一個最小高度，但我用jQuery來讓我的內容的div像這樣的高度...

$(document).ready(function() { 
var div_height = $("#content").height(); 
$(".leftSideBar").css("height", div_height); 

var div_height = $("#content").height(); 
$(".rightSideBar").css("height", div_height); 
}); 

我所要做的是在div的頂部和具有頂部圖像在div的底部底部圖像......這裏是HTML ...

<div class="leftSideBar"> 
<img src="images/leftSideTop.jpg" width="174" height="70" border="0" /> 
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" /> 
</div><!--leftSideBar--> 

<div class="content" id="content"></div><!--content--> 

<div class="rightSideBar"> 
<img src="images/rightSideTop.jpg" width="174" height="70" border="0" /> 
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" /> 
</div><!--rightSideBar--> 

和CSS

.leftSideBar{ 
    background:url(../images/leftSide.jpg) repeat-y; 
    float:left; 
    margin-top: -49px; 
    width:174px; 
} 

.rightSideBar{ 
    background:url(../images/rightSide.jpg) repeat-y; 
    float:right; 
    margin-top: -49px; 
    width:174px; 
} 

.content{ 
    background:#FFF; 
    width: 992px; 
    position:relative; 
    min-height: 591px; 
    float:left; 
    margin: -48px auto 0; 
    font-size:13px; 
} 

任何幫助或在正確的方向點將是真棒！謝謝！

Answer 1

由於看起來您使用的是靜態寬度，因此您應該能夠將IMG元素塊和位置：絕對並將它們對齊頂部/底部。

.img-side{ 
    display:block; 
    position:absolute; 
    left:0; 
    top:0; /* we'll use top as a default*/ 
} 
.img-side.bottom{ 
    top:auto; /* might need this, I'm not sure. */ 
    bottom:0; 
} 

你HTML只需添加類：

<img class="img-side" ... /> 
<img class="img-side bottom" ... /> 

如果你打算在你的側邊欄的內容，你要適當的填充添加到側邊欄的頂部/底部，你的內容不會流過你的形象（除非這是設計）。

UPDATE

一個側面說明，你必須讓你的側邊欄的位置是：相對所以你的IMG元素用它來定位。你可能會更新你的CSS更像這樣：

.sideBar{ /* left will be default */ 
    background:url(../images/leftSide.jpg) repeat-y; 
    float:left; 
    margin-top: -49px; 
    width:174px; 
    position:relative; 
} 

.sideBar.right{ 
    background:url(../images/rightSide.jpg) repeat-y; 
    float:right; 
}