Проблемы, возникающие при использовании простого скрипта jQuery для захвата одной высоты div и создания другого div такого же размера

Question

В основном я хочу получить высоту .r-side и применить его к высоте .l-side так что эти два элемента всегда имеют одинаковую высоту, даже если размер окна изменен и расположен друг над другом. Я не уверен, что не так с моим JQuery.

Вот что я получил:

$(window).load(function(){ $(".l-side").css({'height':($(".r-side").height()+'px')}); });

Использование jQuery 3.1.1. И вот jsFiddle вопроса, который я имею.

Я открыт для других методов, кроме jQuery, чтобы выполнить это, но в своем исследовании я нашел только решения, которые были специфичны для столбцов, и эти div должны быть расположены непосредственно друг над другом.

Answer 1

Вы ссылались .l-side а также .r-side как классы в jQuery, и закодировали их как идентификаторы в разметке:)

Во фрагменте я изменил вашу ширину, чтобы она отображалась в окне предварительного просмотра, но теперь вы видите, что высота совпадает.

$(window).load(function() {
  $("#r-side").css({
    'height': ($("#l-side").height() + 'px')
  });
});

#l-side img {
  width: 100px;
}

#r-side {
  width: 100px;
  height: 100px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="l-side"><img src="http://connor.la/sandbox/refsmaster/images/forever-2.jpg"></div>
<div id="r-side"></div>

Answer 2

Пожалуйста, используйте идентификатор селектора '#', так как вы использовали идентификатор, а не классы, и используете document.ready вместо window.load.$(document).ready(function(){ $("#r-side").css({'height':($("#l-side").height()+'px')}); });