jQuery获取窗口大小并应用于div CSS并根据浏览器调整大小

Question

Ok so I want to make a div full screen. The only way I can do this is through JavaSript/jQuery. CSS won't work with this one.

I want to get the size of the browser and apply the size to a css of a div.

$(function(){

  var wheight = $(window).height();

  $(window).resize(function() {
    wheight = $(window).height();
  });

  $('.slide').css({"height":wheight+"px"});

});

It kind of works however the window resize section wont work and the css does not adjust on the fly to the browsers height.

Any idea where I have gone wrong?

Thanks

Answer 1

You are only setting the size of the element once and not everytime the window is resized. This is how I would've done it:

$(function () {

    //Adjust element dimensions on resize event
    $(window).on('resize', function () {
        $('.slide').css('height', $(this).height() + "px");
    });

    //Trigger the event
    $(window).trigger('resize');
});

Answer 2

Try this:

$(function(){

   var wheight = $(window).height();

   $(window).resize(function() {
      wheight = $(window).height();
      $('.slide').css({"height":wheight+"px"});
    });

});