Question

我想让2 div的高度相等，如果一个更大，另一个应该伸展到它的高度。我只想使用CSS。以下是我的代码（Fiddle）：

HTML：

<div class="common">
    lorem ipusm random text just for check
</div>
<div class="common">
    lorem ipusm random text just for check lorem ipusm random text just for check
</div>

CSS：

.common{
  border:1px solid red;
  float:left;
  margin-left:5px;
  width:20%;
  padding:5px;
}

此

为fiddle

Answer 1

您可以使用flexbox模型。只需为div添加一个容器。并将display: flex添加到父级，将flex: 1添加到子级。

已编辑jsfiddle

您可以在http://css-tricks.com/snippets/css/a-guide-to-flexbox/

上找到有关flexbox的更多信息

Answer 2

我认为你应该使用table：

.container{
    display:table;
    border: solid 1px green;
    width: 200px;
}
.common{
    display:table-cell;
    border:1px solid red;
    margin-left:5px;
    width:20%;
    height:100%;
    padding:5px;
}

table fiddle

或js：

var maxHeight = 0;
$('.common').each(function(){
    var height = $(this).height();
    if(height > maxHeight){
        maxHeight = height;
    }
})

$('.common').each(function(){
    $(this).height(maxHeight);
})

js fiddle

Answer 3

控制元素高度的CSS属性称为height。

height属性不支持负值。如果指示了百分比，则绘制父元素的高度。如果父元素没有明确定义的高度，则分配自动高度值。

继承值表示元素的高度是从其父元素继承的。如果未明确设置此属性的值，则使用自动值表示浏览器应自动计算元素的高度，考虑其内容并在站点上可用。

CSS定义了元素高度的另外两个相关属性：min-height和max-height。

.common{
  border:1px solid red;
  float:left;
  margin-left:5px;
  min-height: 100px;
  width:20%;
  padding:5px;
}

更多信息Height

如何设置两个div的高度等于css

3 个答案: