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;..............................}