How can I dynamically change the height of a .test div based on the browser width and height? I want the value to update whenever the browser is resized.
$(document).ready(
function() {
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
var vpw=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var vph=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;
$('.test').css({'height': vph + 'px'});
}
);.test
{
background: green;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test"></div>