magento - jquery resize div height relative to document height -

i trying dynamically resize div using jquery adjusts height of visitor's viewport within magento.

var $j = jquery.noconflict(); $j(window).load(function() { $j(".header-clear").css({'height':(($j(document).height())/2.7)+'px'}); }); 

for example if visitor's viewport 1080px div height should set 400px.

edit: changed script based on answers , .jquery api .resize , .height, , removed live link.

var $j = jquery.noconflict(); $j(window).load(function() { $j(".header-clear").css({'height': parsefloat(($j(window).height())/2.7)+'px'}); }); $j(window).resize(function() { $j(".header-clear").css({'height': parsefloat(($j(window).height())/2.7)+'px'}); }); 

this got working me.

you use .resize() function trigger resize, this:

 var $j = jquery.noconflict();   $j(document).ready(function() {    resizeit();  //the first load    $j(window).resize(function(){ resizeit(); });  //on every resize  });   function resizeit() { //function resize object    $j(".header-clear").css({'height':(($j(document).height())/2.7)+'px'});  }