让两个div具有相同的高度[重复]

Posted 2023-03-05

【中文标题】让两个div具有相同的高度[重复]

【英文标题】：Let two divs have the same height [duplicate]

【发布时间】：2014-09-28 12:30:06

【问题描述】：

我有两个这样的 div：

<div id="div1">ABC</div>
<div id="div2">ABC DEF GHI JKL MNO</div>

#div1 
    width: 50px;
    background-color: red;
    float: left;


#div2 
    width: 50px;
    background-color: green;
    float: left;

我想让 div1 的高度与 div2 的高度相同。

我该怎么办？谢谢！

JSFIDDLE

【问题讨论】：

为#div1, #div2height: 20px;设置一个静态值

不知道为什么这被否决了，用户解释了他的问题，提供了一个代码，如果你有任何反对的理由，请在投票后发表评论

【参考方案1】：

Demo

最简单的解决方案是将两个 div 包装在一个 div 中并使其显示为 flex；

html

<div class="wrapper">
    <div id="div1">ABC</div>
    <div id="div2">ABC DEF GHI JKL MNO</div>
</div>

css

.wrapper 
    display: flex;

【讨论】：

是的，你是最棒的。我更喜欢您的解决方案，而不是添加大填充底部和负边距底部的解决方案。

【参考方案2】：

这样你的两个 div 将获得相同的高度（最大 Div 的高度）

（此代码使用 JQuery）

$( document ).ready(function() 
    var s1 = $('#div1').height();
    var s2 = $('#div2').height();

    if (s1 > s2)
        $('#div2').css('height', s1 + "px");
    else
        $('#div1').css('height', s2 + "px");
);

【参考方案3】：

使用 jquery 你可以这样做：

var tallness = $("#div2").height();
$("#div1").height(tallness);

JSFIDDLE

【参考方案4】：

如果您介意旧浏览器或旧的可靠方法，您可以查看 http://alistapart.com/article/fauxcolumns 一个经典的，现在可以使用很长时间了 :) 并且适合您的需求，因为设置了元素的宽度.

一个非常古老的模板仍然使用这种方法和 3 col 布局：http://www.pixy.cz/blogg/clanky/css-3col-layout/（那里没有 flex 和 table 也没有 js ;)）