CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Snorlax
Snorlax

Reputation: 4765

How to continuously resize Div to 100% VH

fiddle: https://jsfiddle.net/jzhang172/s4tzo2ms/

I want to continuously re-size div height to 100% of view height. I can get it to set when the browser loads but I'm not sure how to always change it whenever the user changes the browser not just when the browser loads.

var width = $(window).width(); 
var height=$(window).height(); 
$("#mydiv").width(width);
$("#mydiv").height(height);
#mydiv{
  background:black;
  height:100px;
  width:100%;
}
*{
  margin:0px;
  padding:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>

Upvotes: 3

Views: 1966

Answers (3)

The Process
The Process

Reputation: 5953

If you prefer js over css solution, you need something like this:

var width = $(window).width(); 
var height=$(window).height(); 
var mydiv=$("#mydiv");
mydiv.width(width);
mydiv.height(height);

$(window).resize(function(){
  width = $(window).width();
  height=$(window).height();
  mydiv.width(width);
  mydiv.height(height);

});

Upvotes: 2

Vincent1989
Vincent1989

Reputation: 1657

Why not just rely plainly on CSS?

First remove your existing javascript, then set the width and height for the browser and mydiv to 100%, so that when you resize the screen the div will resize relatively with the parents.

html,body{
 height:100%;
  width:100%;
}
#mydiv{
  background:black;
  height:100%;
  width:100%;
}

*{
  margin:0px;
  padding:0px;
}

Upvotes: 0

mmativ
mmativ

Reputation: 1414

Why you dont use, 100vh in height?

#mydiv{
  background:black;
  height:100vh;
  width:100%;
}
*{
  margin:0px;
  padding:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>

Upvotes: 2

Related Questions