如何让两个div的高度相等？

胡萝卜作物

在这里，我在班级行中有两个引导程序面板。
而且我试图使面板的高度彼此相等，即使在<div class="panel-body"></div>任何面板的内部放置了任何数量的数据。

下面是我的html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Panel Heading</div>
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                <div class="panel-footer">Panel Footer</div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-default col">
                <div class="panel-heading">Panel Heading</div>
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

                </div>
                <div class="panel-footer">Panel Footer</div>
            </div>

        </div>
    </div><br><br>

任何帮助将不胜感激。谢谢

达瓦尔·贾多什

在这种情况下最好使用matchHeight.js。

您可以匹配您想要的任何组件。

我已经匹配了panel-body，因为当你向它添加内容时，它会增加。这里还有一支笔。

注意：随着尺寸缩小，将不会应用此属性。尽管根据我的说法，如果该属性仍然存在，则不需要滚动。因为用户将不得不滚动所有空格。

$(function() {
  $('.panel-body').matchHeight();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<div class="row-eq-height">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="panel panel-default col sec">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      </div>
      <div class="panel-footer">Panel Footer</div>
    </div>

  </div>
</div><br><br>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。