Jquery - Resize An Elements Height To Match Window Without Refreshing, On Window Resize

I have the following script that works okay if page is refreshed but I want to be able to dynamically get the size of the resized window without refreshing the page and apply respe

Solution 1:

Try the following, the function will be called every time the window is loaded or resized:

$(window).on('load resize', function(){
    var w = $(window).width();
    var h = $(window).height();

    $('.section-content').height(h);
});

You confirmed in the comments that section should in fact be .section-content.

JSFiddle

Solution 2:

$(window).resize(function(){
    var w = $(window).width();
    var h = $(window).height();
    $('.section-content').height(h);
});

Solution 3:

Try setting height width on window resize.

Window resize height/width change Fiddle

Jquery:

$(window).on('resize', function(){
var h=($(window).height();
var w=$(window).width();
$('.section-content').height(h);
}); 

Solution 4:

functionsetToWinSize(){
    var win = $(window);
    $('section').width(win.width()).height(win.height());
}

$(function(){        // on DOM readysetToWinSize();    

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

});