如何强制浮动 div 为其父级的高度？答案

【问题标题】：How can you force a floating div to be the height of its parent?如何强制浮动 div 为其父级的高度？
【发布时间】：2010-12-02 08:58:09
【问题描述】：

alt text http://img14.imageshack.us/img14/2055/sof.jpg

HTML 标记：

<div class="planRisk">
    <div class="innerPlanRiskRight"> 
        <div class="rmPlanFrequency">10 </div>
        <div class="rmPlanSeverity"> 5</div>
        <div class="rmPlanRiskFactor">50 </div>
        <div class="rmPlanNumSolutions">2</div>
        <div class="rmPlanPercentComplete">34% </div>
        <div class="rmPlanDeletePlanRisk"> X </div>
    </div>


    <div class="rmPlanRiskTitle"> Pandemic Influenza</div>

</div>

CSS：

.planRisk{background-color:#DEECD1; border:1px solid #BEBEBE;}
.innerPlanRiskRight{float:right; color:#000000;}

.rmPlanFrequency{float:left; width:46px;background-color:#d9dee1; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;}
.rmPlanSeverity{float:left; width:46px; background-color:#dbe1d4; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;}
.rmPlanRiskFactor{float:left; width:46px; background-color:#e5d5da; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;}
.rmPlanNumSolutions{float:left; width:46px; background-color:#dae4e4; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;}
.rmPlanPercentComplete{float:left; width:46px; background-color:#dddddd; text-align:center; padding:0.2em; }
.rmPlanDeletePlanRisk{float:left; width:30px; background-color:#DEECD1; text-align:center; padding:0.2em;}  
.rmPlanRiskTitle{padding:0.2em; }


.rmPlanSolutionContainer{background-color:#f0f9e8; border: 0 1px 1px; border-left:1px solid #CDCDCD; border-right:1px solid #cdcdcd; }
.innerSolutionRight{float:right;}
.rmPlanSolution{border-bottom:1px solid #CDCDCD; padding-left:1em;}
.rmPlanSolutionPercentComplete{float:left; width:46px; background-color:#E2EADA; padding-left:0.2em; padding-right:0.2em; text-align:center;}
.rmPlanDeleteSolution{float:left; width:30px; text-align:center; padding-left:0.2em; padding-right:0.2em; }

【问题讨论】：

这个更适合doctype.com。

标签： html height css-float

【解决方案1】：

这本质上是一个“等列高度”的问题。您不能直接将子级高度设置为 100%，因为父级的高度是不确定的。有workarounds。各种。

但在你的情况下：使用一张桌子。很明显是表格数据，所以用表格来表示没有错。

【讨论】：

【解决方案2】：

在这种情况下，我认为使用表在语义上是可以接受的，它会自动按照您想要的方式运行。

【讨论】：

【解决方案3】：

我认为这个问题被问了很多。我在搜索中找到了this。

【讨论】：

【解决方案4】：

设置呢

min-height: inherit;

适用于现代浏览器。

【讨论】：