Question

看看这个jsfiddle。如您所见，左右div的高度与中心div的高度不同。如何扩展侧面div并使高度与中心div相同？我尝试使用身高：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中：这是我对你的小提琴的修改：

Modification to Your 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的最大高度，或按照Adrift的建议使用display:table-cell;，如下所示： -

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

背景不是覆盖整个地区

3 个答案: