Как установить высоту div с помощью высоты другого div

Question

У меня есть еще один вопрос о содержимом css auto size. У меня есть три div рядом с eachother, что все должны быть одной и той же длины, но эта длина задается самым длинным div, а не постоянным. Я попытался сделать что-то похожее на ответ в этом вопросе (How to make a div's width stretch between two divs), который я попросил чуть-чуть назад, но не успел установить его, чтобы установить высоту div.

Три divs заданы ширины.

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

Возможно его возможно с дисплеем: таблица.

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>