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/

注意：我把它放进去表明其他部分没有被强制调整到最长的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>

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

1 个答案: