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

问题描述：

我有另一个问题关于css自动调整内容。我有三个彼此相邻的div，所有都需要是相同的长度，但是长度由最长的div设置，而不是永久的。我已经尝试做类似于这里的答案（如何使一个div的宽度拉伸两个div之间问题我问一点前，但没有成功，它设置div的高度。

I have another question about css auto sizing content. I have three divs next to eachother that all need to be the same lenght, but that length is set by the longest div, and not permanent. I have tried to do something similar to the answer in this ( How to make a div's width stretch between two divs ) question I asked a little bit ago, but had no success getting it to set the height of the divs.

这三个div是设置的宽度。

The three divs are set widths.

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/

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

注意：我把
放在其他部分不会被强制调整到最长的div。此外，对不起，如果有什么你不明白，因为我跑了不到5小时的睡眠，不能集中一半的时间。

NOTE: I put the
s in to show that the other parts are not being forced to resize to the longest div. Also, sorry if there is anything you don't understand, as I am running off of less than 5 hours of sleep and can't concentrate half the time.

答

也许可以使用display：table。

Maybe its possible with 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>

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

相关推荐