Reymark Reymark - 1 year ago 131
CSS Question

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.

$(window).resize(function(){ // On resize

border: solid 2px #3675B4;

<script src=""></script>
<div id = "mydiv">


Answer Source

You should use css instead of javascript.

use following class

  border: solid 2px #3675B4;

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();
    "height": windowWidth + "px",
    "width": windowWidth + "px",


$(window).on("load resize", resize);

Updated Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download