CSS定位 - rezising div到其他div

Question

<div id="container" style="width:300px;"> 
    <div id="leftBar" style="display: inline-block; width: 200px;"> 
     //explanding text ... bla bla bla 
    </div> 
    <div id="rightBar" style="display: inline-block; width: 100px;"> 
     //this bar has a background image that should stretch to a the left bars HEIGHT 
    </div> 
</div> 

我想用rightBar來擴展leftBar。我無法使用固定值，因爲leftBar包含長度不等的文本。 rightBar應該與leftBar的高度相等。

Answer 1

可以稍微改變的標記，並用此HTML結束：

<div id="container"> 
    <div id="leftBar"> 
     <div id="rightBar"> 
      This is your 'rightBar' 
     </div> 
     <p>Many paragraphs of text</p> 
     <p>Many paragraphs of text</p> 
     <p>Many paragraphs of text</p> 
     <p>Many paragraphs of text</p> 
     <p>Many paragraphs of text</p> 
     <p>Many paragraphs of text</p> 
     <p>Many paragraphs of text</p>  
     <p>Many paragraphs of text</p> 
     <p>Many paragraphs of text</p> 
     <p>Many paragraphs of text</p> 
    </div> 
</div>​​​ 

這個CSS：

#container { 
    width: 300px; 
    background-color: yellow; 
    overflow: hidden; 
} 

#leftBar { 
    position: relative; 
    width: 200px; 
    background-color: green; 
    padding-right: 100px; 
} 

#rightBar { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 100px; 
    background-color: red; 
    *height: expression(document.getElementById('container').offsetHeight); /*ie6 hack*/ 
} 

這應該很好地工作。 Check it out.