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扩展rightBar。我不能使用固定值，因为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.

CSS定位 - 将div调整为另一个div

1 个答案: