Matching div height to parents , on window resize and load

Question

I am able to match a child container to the parents height on page load, however my issue is getting it to match the parents height when resizing the window, here is my code so far:

HTML:

<div id="ocg-hero" class="container">
 <div class="row">

  <div class="large-6 columns heroContent"> </div>
  <div class="large-6 columns heroGraphic" > </div>

 </div>
</div>

Script :

function heroImageResize (){
    var heroHeight = $("#ocg-hero .row").height(),
        heroGraphicHeight = $(".heroGraphic").height();

        $(".heroGraphic").css("height",heroHeight);
};

heroImageResize();

Thanks!

Answer 1

对于两个处理程序：

$(window).on('load resize',heroImageResize);

Answer 2

jQuery has an event for resizing, you can use that for recalculating your height.

http://api.jquery.com/resize/

Answer 3

$(function(){   
   $(window).resize(heroImageResize);
});

as you it on page load also -

$(function(){  
  $(window).resize(heroImageResize).resize();
});

Answer 4

you can use resize http://api.jquery.com/resize/

$(window).resize( heroImageResize);
$(document).ready(function(){ $(window).resize(); /*triggers it*/  })