jquery (windows).height increase every time I resize the window

Question

I want to resize a div on resize of the window to make it fill the entire browser window...
I searched a lot on internet finding a solution, but everything I tried cause the same problem...
at first load of the page it works well, but when I try to resize the window the value of bodyheight keeps increasing...

this is my code

$(document).ready(function() {
  body_sizer();
  $(window).resize(body_sizer);
});
function body_sizer() {
  var bodyheight = $(window).height();
  $("#contenitore_full").css('height', bodyheight);
}

EDIT

OK!!! my fault as i thought :) problem was caused by a wrong way to call jquery in wordpress. i'm sorry for let you loose time thanks a lot everyone ale

Answer 1

You don't need javascript to achieve what you want. All you need is CSS. Here's a fiddle

CSS

body, html { margin:0; height:100% }
#contenitore_full { border:1px solid #FF0000; width:25%; height:99%; display:block; }

HTML

<div id="contenitore_full"></div>

The thing is in order for height to work, the parent's height also needs to be defined. That's why the height of the body and html tags also have a height of 100%.

Answer 2

It looks like your 'body_sizer' function might not be firing. Add your parens () to the end of it or either create an handler function inside .resize()

$(window).resize(function() {
      var bodyheight = $(window).height();
      $("#contenitore_full").css('height', bodyheight);
});

Answer 3

I had the exact same problem. I recommend using javascript instead of jQuery.

  const width = window.innerWidth;
  const height = window.innerHeight;