Dynamic change in an element when resizing the window

Question

$(document).ready(function(){
    var heightJanela = $(window).height() + "px";
    $("#banner-hold").css("height",heightJanela);
});

I performed the above code, so that when the document is loaded, the div "banner-hold" receives the height same as in the window. So that the same function was performed when the window received a resize, I switched the .ready for .resize and .change but neither worked, how can I correct that ?

Answer 1

$(document).resize will not work because it is not the document that changes size and yes the window, the correct would be $(window).resize. To execute the code while loading and modifying size recommend the following method: JS:

$(document).ready(function(){
    mudarTamanho();
    $( window ).resize(mudarTamanho);
});

function mudarTamanho(){
    var heightJanela = $(window).height() + "px";
    $("#banner-hold").css("height", heightJanela);
}

Documentation of the resize (https://api.jquery.com/resize/).

There may be a bit of space passing/leftover, due to margin and padding, if you want to remove it add this rule to your CSS:

html, body{
    margin: 0;
    padding: 0;
}