html - 背景が領域全体を覆っていない

Question

このjsfiddleを見てください。ご覧のとおり、左右の div の高さは中央の div の高さと同じではありません。サイド div を拡張して高さを中央 div と同じにするにはどうすればよいですか? height:100%; を使ってみました。しかし、私が望む結果は得られませんでした。

私のHTML：

<div id="left">
    dfsfdsf
</div>
<div id="center">
fldskjflsjfls
    <br/>gdfgdfg
</div>
<div id="right">
fdsflsdf    
</div>

私のCSS：

#left {float:left;width:100px;background:blue;}
#center {float:left;width:100px;background:purple;}
#right {float:left;width:100px;background:green;}

Answer 1

div をフローティングする代わりにdisplay: table-cell;、コンテンツに関係なく高さが均一になるように使用できます。

http://jsfiddle.net/scyxC/2/

#left {display: table-cell;width:100px;background:blue;}
#center {display: table-cell;width:100px;background:purple;}
#right {display: table-cell;width:100px;background:green;}

Answer 2

各 div の高さを指定するか、高さを 100% に設定してコンテナー div に入れることができます。

あなたのjsFiddleへの変更

<div style="height: 100px;">
<div id="left" style="height: 100%;">
    dfsfdsf
</div>
<div id="center" style="height: 100%;">
    fldskjflsjfls
    <br/>gdfgdfg
</div>
<div id="right" style="height: 100%;">
    fdsflsdf    
</div>
</div>

Answer 3

この不均一な高さの理由は、入力したコンテンツの量によるものです。各 div の最大高さを指定するか、次のdisplay:table-cell;ように Adrift が提案するように使用できます:-

#left {display: table-cell;.....................}
#center {display: table-cell;........................}
#right {display: table-cell;..............................}