Issues using a simple jQuery script to grab one div height & make another div the same size

Question

Basically I want to get the height of .r-side and have it applied to the height of .l-side so that these two elements are always the same height even if the window is resized, and positioned on top of each other. I'm not sure what's wrong with my jQuery.

Here's what I got:

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

Using jQuery 3.1.1. And here's a jsFiddle of the issue I'm having.

I'm open to other methods than jQuery to accomplish this but in my research I only found solutions that were specific to columns, and these divs need to be positioned directly on top of each other.

Answer 1

You have referenced .l-side and .r-side as classes in the jQuery, and coded them as ID's in the markup :)

In the snippet I altered your widths so it displays in the preview window, but you can see the heights now match.

$(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

Please use id selector '#' as you have used id not classes and use document.ready instead of window.load.$(document).ready(function(){ $("#r-side").css({'height':($("#l-side").height()+'px')}); });