トップイメージ、リピートバックグラウンド、ボトムイメージ... HTMLとCSS

Question

私はDivとその呼び出されたleftSideBarを持っていて、内部には2つのイメージ、上部と下部がありますこのdivはrepeat-yバックグラウンドを持ちます。これは、最小の高さを持っていたが、私はそうのような私のコンテンツのdivの高さを取得するためにjqueryのを使用...私がやろうとしています何

$(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要素の下部の下の画像は...ここに...

<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 HTMLで

.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" ... /> 

を、あなたはサイドバーの上/下に適切なパディングを追加したいと思うので、あなたのコンテンツはあなたのイメージ上に流れません（それがデザインでない限り）。あなたのIMG要素は、位置決めのためにそれを使用して相対：

UPDATE

ワンサイドノートでは、あなたのサイドバーの位置を確認する必要があります。

.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; 
}