javascript - jQuery 将一个 div 的高度设置为另一个的 'dynamic height'

Question

我有两个 div。

  <div class="col-1"><p>Content</p></div>
  <div class="col-2"><img src="" alt="" /></div>

每一个里面都有他们尊重的内容。

我正在尝试将 col-2 的高度设置为与 col-1 的高度完全相同。

我用 jQuery 试过这个:

   $(document).ready(function() {
        var divHeight = $('.col1').height(); 
        $('.col2').css('min-height', divHeight+'px');
    });

问题是 col-1 没有设置高度。它有一个动态高度，随着内容的增加而增加。因此上面的代码不适用于它。

有什么方法可以使用 jQuery 将 col-2 的最小高度设置为等于 col 1 的动态高度？

Answer 1

这对我来说很好，只是你的类名是错误的，类名应该是 .col-1 和 .col-2:

$(document).ready(function() {
    var divHeight = $('.col-1').height(); 
    $('.col-2').css('min-height', divHeight+'px');
});  

这是 Fiddle

编辑- 基于评论:
你可以在不使用 jquery 的情况下完成所有这些

1. Flexbox (IE 8 和 9 不支持) - 如果将 flex 应用到父 div，它将使其所有子元素的高度相等:

    .row{ display: flex;}  
   

2. table - 你可以给你的 div 表格布局

   .row {display: table; }
   
   .row div { display: table-cell;}