使子div与父元素的高度相同[重复]答案

【问题标题】：make child div the same height as parent element [duplicate]使子div与父元素的高度相同[重复]
【发布时间】：2014-12-10 07:18:56
【问题描述】：

我有一个类 row-fluid 的父 div，我希望它的子 div 与父 div 的高度相同。

<div class="row-fluid">    
    <div class="span2">            
    </div>      
    <div class="span7">              
    </div>       
    <div class="span3">                                       
    </div>
</div>

这是我的css代码：

.row-fluid{
    float: left;
    width: 100%;
    background: blue;
}


.row-fluid > .span2{
    float: left;
    width: 23.076923076923077%;
    background: red;
}

.row-fluid > .span7{
    float: left;
    width: 48.5%;
    background: yellow;
}


.row-fluid > .span3{
    float: left;
    background: green;
}

这是说明我的 div 的图像：

蓝色区域是我的父 div，红色、黄色和绿色区域对应于它的子 div。

【问题讨论】：

对父级使用display:table，对子级使用display:table-cell，而不是浮动它们
.childDiv{ Height:100%;} 工作吗？
@Pete --> 你说的我试过了，但是没用。
@AlyssaGono 试试这个 - jsfiddle.net/y1kac2v7
@AlyssaGono，什么不起作用？ jsfiddle.net/cq7yhnwd

标签： html css twitter-bootstrap height

【解决方案1】：

为什么不在父 div 上设置高度，在子跨度上设置 height: 100%？

.row-fluid {
  height: 300px;
}

.row-fluid > .span2,
.row-fluid > .span7,
.row-fluid > .span3 {
  height: 100%;
}

否则，您可能想看看this article。

【讨论】：

不，我不能这样做，我的网站必须是响应式的。
@AlyssaGono 然后检查我的编辑，也许那篇文章有帮助。