CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rocky
Rocky

Reputation: 137

JQuery/Javascript for Div auto resizing when browser/window resize

I have only 1 div and what I want is that when browser resize, the height and width of the div will auto resize. For example, I pull the browsers height downward, then the height of the div, will also increases and when I pull the width of the browser, then the div's width will also increases. And vice versa, when the browser shrink/decreases its width and height, the div will also do the same.

https://jsfiddle.net/koykoys/eghL1cjp/2/

$(window).resize(function(){ // On resize
       $("#mydiv").css('height','+=1px','width','+=1px');
});
#mydiv{
  border: solid 2px #3675B4;
  height:300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id = "mydiv">

</div>

Upvotes: 1

Views: 5879

Answers (1)

Aditya Ponkshe
Aditya Ponkshe

Reputation: 3890

You should use css instead of javascript.

use following class

#mydiv{
  border: solid 2px #3675B4;
  height:100vh;
  width:100vw;
}

Updated Fiddle

vh stands for viewport-height and vw is viewport-width

So your div is getting height:100vh; means 100% of viewport height and width:100vw; means 100% of viewport width

Read more about viewport units in detail

Update -

You should avoid using JS for this but for some reason if you have to.

This should work 

var resize = function() {
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
    console.log(windowWidth)
    console.log(windowHeight)
    $("#mydiv").css({
    "height": windowHeight + "px",
    "width": windowWidth + "px",

  });

  }
$(document).ready(resize);
$(window).on("load resize", resize);

Updated Fiddle

Upvotes: 6

Related Questions