如何使用另一个div的高度自动设置一个div的高度

Question

我还有一个关于 CSS 自动调整内容大小的问题。我有三个相邻的 div，它们都需要相同的长度，但该长度是由最长的 div 设置的，而不是永久的。我试图做一些类似于我之前问过的这个（How to make a div's width stretch between two divs）问题中的答案，但没有成功设置 div 的高度。

三个 div 是设置宽度。

HTML：

<div id="content">
    <div id="bodySideBar">
        a
        <br><br><br>
        b
    </div>
    <div id="bodyUpdateBar">
        a
        <br><br><br><br><br><br><br><br><br>
        b
    </div>
    <div id="bodyContent">
        a
        <br><br><br><br><br><br>
        b
    </div>
</div>

CSS：

#content {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: inline;
}

#bodyContent {
    display: block;
    float: none;
    width: auto;
    height: 100%;
    background: #FFC273;
}

#bodySideBar {
    display: inline-block;
    float: left;
    width: 50px;
    height: 100%;
    background: #BF8130;
}

#bodyUpdateBar {
    display: inline-block;
    float: right;
    width: 200px;
    background: #FFCA40;
}

JSFIDDLE：http://jsfiddle.net/ueXR9/

注意：我放了
s 以表明其他部分没有被强制调整为最长的 div。另外，如果有什么不明白的地方请见谅，因为我的睡眠时间不到 5 小时，而且一半时间无法集中注意力。

Answer 1

也许它可以通过 display: table 来实现。

http://jsfiddle.net/ueXR9/1/

CSS：

#content {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: table;
}
#bodyContent {
    display: table-cell;
    float: none;
    width: auto;
    height: 100%;
    background: #FFC273;
}
#bodySideBar {
    display: table-cell;
    width: 50px;
    height: 100%;
    background: #BF8130;
}
#bodyUpdateBar {
    display: table-cell;
    width: 200px;
    background: #FFCA40;
}

HTML：

<div id="content">
    <div id="bodySideBar">a
        <br>
        <br>
        <br>b</div>
    <div id="bodyUpdateBar">a
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>b</div>
    <div id="bodyContent">a
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>b</div>
</div>