title: JS / jQuery How to get height of dynamic (responsive) div?
body: <p>I have not been able to find an answer that works for me on SO.</p>
  
  <p>Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is. </p>
  
  <p>What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).</p>
  
  <p>I can get the height initially but it never changes after the first value when the screen is being resized. </p>
  
  <p>quick demo up here: <a href="http://devpeek.com" rel="nofollow">link</a></p>
  
  <p>look in console to see height being returned. notice that it doesn't change when browser is resized.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function(){
  
      var explore = $('#explore').height();
      console.log(explore);
  
      $( window ).on("resize", function() {
      console.log(explore);
      });
  
  });
  </code></pre>
  
  <p>I've also tried <code>.css("height")</code> but that didn't fix the issue.</p>
  
  <p>*note the div does not have fixed positioning on this example since it would make the layout more confusing</p>