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

Posted 2023-03-06

【中文标题】使子div与父元素的高度相同[重复]

【英文标题】：make child div the same height as parent element [duplicate]

【发布时间】：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

【参考方案1】：

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

.row-fluid 
  height: 300px;


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

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

【讨论】：

不，我不能这样做，我的网站必须是响应式的。

@AlyssaGono 然后检查我的编辑，也许那篇文章有帮助。