$(document).ready(function(){
var heightJanela = $(window).height() + "px";
$("#banner-hold").css("height",heightJanela);
});
I made the above code so that when the document is loaded, the div "banner-hold" gets height equal to that of the window. For the same function to be performed the moment the window received a resize , I changed the .ready by .resize and .change but neither worked, how can I fix this?
$(document).resize will not work because it is not the document that changes size, but the window, the correct one would be $(window).resize . To execute the code when loading and modifying size I recommend the following method:
JS:
$(document).ready(function(){
mudarTamanho();
$( window ).resize(mudarTamanho);
});
function mudarTamanho(){
var heightJanela = $(window).height() + "px";
$("#banner-hold").css("height", heightJanela);
}
resize documentation ( link ).
There may be some space left / left, due to margin and padding, if you want to remove it add this rule to your CSS:
html, body{
margin: 0;
padding: 0;
}