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

除了 float 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;}