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

【问题标题】：jQuery set height of a div to the 'dynamic height' of anotherjQuery 将一个 div 的高度设置为另一个的“动态高度”
【发布时间】：2015-08-20 04:42:52
【问题描述】：

我有两个 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 的动态高度？

【问题讨论】：

因为 HTML 中的元素类与 JS 中的不同。检查工作Demo
@Tushar 很好，但他指定了 “问题是 col-1 没有设置高度” 我在我的在这里回答stackoverflow.com/a/32109749/4323504
@LuthandoLoot 对。这是另一个Demo
@Tushar 很好，我的回答中已经有这个了 ;-)
@AlexZahir 您应该为此提出另一个单独的问题

标签： javascript jquery html css

【解决方案1】：

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

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

这里是Fiddle

EDIT-基于 cmets：
您可以在不使用 jquery 的情况下完成所有这些操作

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

table - 你可以给你的 div 设置表格布局

.row {display: table; }

.row div { display: table-cell;}

【讨论】：

你会拉小提琴吗？请注意，我们没有在 .col 1 上指定高度
@AlexZahir 我添加了小提琴
@AlexZahir div 确实占据了全高，问题是图像，让我看看它为什么这样做，我会回复你
但是背景颜色是在 div 上设置的。我不希望图像拉伸。只显示它现在不做的背景颜色
@AlexZahir 它确实显示了您的背景颜色，将其更改为其他颜色，您会清楚地看到它，例如background: red;

【解决方案2】：

首先，您需要修复 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();
});
```
使用绑定

记住！！！对于响应式设计，即使调整窗口大小，您也需要调用上述函数！

祝你好运！

【讨论】：

【解决方案3】：

添加resize事件监听，当col-2调整大小时，触发一个函数调整col-2

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

【讨论】：

【解决方案4】：

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

你可以把它放在回调中。所以当高度改变时执行。像这样Detecting when a div's height changes using jQuery

【讨论】：

但不是在 HTML 代码中。在 HTML 中，它是 col-1 和 col-2。你不认为这可能是实际问题