CSS 定位 - 将 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.