jQuery установить высоту div на «динамическую высоту» другого

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'); 
    }); 

Проблема заключается в том, что кол-1 не имеет высоту установленные на нем. Он имеет динамическую высоту, которая растет, когда ее содержание растет. Поэтому приведенный выше код не работает.

Есть ли способ установить минимальную высоту col-2 равной динамической высоте столбца 1 с помощью jQuery?

Answer 1

это отлично работает для меня, его просто, что ваш класс имена неправильны, то-имена классов должны быть .col-1 и .col-2:

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

Вот Fiddle

Edit- На основе замечаний:
Вы можете сделать все это без использования JQuery

1. Flexbox (не поддерживается в IE 8 & 9) - если применить сгибание до родительского div, это сделает все его высоты детей равными:

   .row{ display: flex;} 
   

2. стол - вы можете дать DIV это План таблицы

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

Answer 2

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

Вы можете разместить это в обратном вызове. поэтому он выполняется при изменении высоты. как этот Detecting when a div's height changes using jQuery

Answer 3

Добавить слушателя изменения размера событий, когда Col-2 изменение размера, вызвать функцию, чтобы изменить размер Col-2

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

Answer 4

Прежде всего, вам нужно исправить имена классов, которые пропустили «-» в вашем коде 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'); 
    } 

}); 

Тогда вы просто вызываете функцию, когда вам нужно ...

Некоторые из различных способов являются:

1. установить интервал или таймер для вызова выше функции один раз в течение периода времени вам нужно.

   setInterval(function(){ set_heights(); }, 100); 
   

2. использование изменение размера событие для .col-1. для вызова функции выше, когда когда-либо был изменен .col-1.

   $('.col-1').resize(function(){ 
       set_heights(); 
   }); 
   

3. использование связывают

запомнить !!! для отзывчивого дизайна вам нужно также вызывать функцию выше, даже когда размер окна изменяется!

Удачи вам!