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

的情况下完成所有这些操作

Flexbox （在IE 8和9中不支持） - 如果您将flex应用于父div，它将使其所有子级高度相等：
```
 .row{ display: flex;}  
```

表格 - 您可以为您的div提供表格布局

.row {display: table; }

.row div { display: table-cell;}

Answer 2

首先，您需要修复错过的班级名称 - ＆＃39; - ＆＃39;在你的jQuery代码中。

如果你想获得.col-1身高，你可以用几种方式来做，我稍后会讨论。

在此之前，你需要编写一个给出.col-1高度和设置.col-2的函数。

$(document).ready(function() {

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

});

然后您只需在需要时调用该功能......

一些不同的方式是：

设置间隔或计时器，以便在您需要的时间段内调用上述功能一次。
```
setInterval(function(){  set_heights(); }, 100);
```
使用.col-1的resize事件。当.col-1改变时调用上面的函数。
```
$('.col-1').resize(function(){
    set_heights();
});
```
使用bind

记住!!!对于响应式设计，即使窗口调整大小，您也需要调用上面的功能！

Answer 3

$('.col-2').css({'minHeight': divHeight+'px'});

您可以将其置于回调中。所以当高度改变时执行。像这样Detecting when a div's height changes using jQuery

Answer 4

添加调整大小事件监听器，当 col-2 调整大小时，触发调整 col-2

的功能

$(document).ready(function() {
    $('.tb-col1').resize(function(){
       var divHeight = $('.col-2').height(); 
       $('.col-2').css('minHeight', divHeight+'px');
    }
});

jQuery将div的高度设置为另一个的“动态高度”

4 个答案: