Позиционирование 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.