CSS | 易学教程

我的页面结构如下：

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

现在， child-left DIV将有更多内容，因此parent DIV的高度根据孩子DIV增加。

但问题是child-right身高不会增加。我怎样才能使它的高度等于它的父母？

#1楼

请将parent div设置为overflow: hidden
然后在子div中你可以为padding-bottom设置很大的数量。例如
padding-bottom: 5000px
margin-bottom: -5000px
然后所有子div都将是父级的高度。
当然，如果你试图将内容放在父div中（在其他div之外），这将无法工作

.parent{ border: 1px solid black; overflow: hidden; height: auto; } .child{ float: left; padding-bottom: 1500px; margin-bottom: -1500px; } .child1{ background: red; padding-right: 10px; } .child2{ background: green; padding-left: 10px; }

<div class="parent"> <div class="child1 child"> One line text in child1 </div> <div class="child2 child"> Three line text in child2<br /> Three line text in child2<br /> Three line text in child2 </div> </div>

示例： http ： //jsfiddle.net/Tareqdhk/DAFEC/

#2楼

我找到了很多答案，但对我来说可能是最好的解决方案

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

你可以在这里查看其他解决方案http://css-tricks.com/fluid-width-equal-height-columns/

#3楼

对于父母：

display: flex;

为孩子：

align-items: stretch;

你应该添加一些前缀，检查caniuse。

#4楼

我用这个评论部分：

.parent { display: flex; float: left; border-top:2px solid black; width:635px; margin:10px 0px 0px 0px; padding:0px 20px 0px 20px; background-color: rgba(255,255,255,0.5); } .child-left { align-items: stretch; float: left; width:135px; padding:10px 10px 10px 0px; height:inherit; border-right:2px solid black; } .child-right { align-items: stretch; float: left; width:468px; padding:10px; }

<div class="parent"> <div class="child-left">Short</div> <div class="child-right">Tall<br>Tall</div> </div>

你可以将孩子向右浮动，但在这种情况下，我精确地计算了每个div的宽度。

#5楼

如果您了解bootstrap，可以使用'flex'属性轻松完成。您需要做的是将下面的css属性传递给parent div

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

其中.homepageSection是我的父div。现在将html中的子div添加为

<div class="abc col-md-6">
<div class="abc col-md-6">

其中abc是我的孩子div。你可以检查两个子div中的高度相等而不管边界只是给了孩子div的边界

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3162313

标签

Caniuse

Bootstrap

FLEX