jquery resize div height относительно высоты документа

Question

Я пытаюсь динамически изменять размер div, используя jquery, чтобы он настраивался на высоту видового экрана посетителя в Magento.

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

Например, если окно просмотра посетителя составляет 1080px, тогда высота div должна быть установлена ​​равной 400px.

EDIT: Изменен скрипт на основе ответов и .jquery api для .resize и .height и удалена прямая ссылка.

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'}); 
}); 

Это заставило его работать на меня.

Answer 1

Вы бы использовать функцию .resize(), чтобы вызвать изменение размера, так что это будет выглядеть примерно так:

var $j = jQuery.noConflict(); 

$j(document).ready(function() { 
    resizeIt(); //the first load 
    $j(window).resize(function(){ resizeIt(); }); //on every resize 
}); 

function resizeIt() { //function to resize your object 
    $j(".header-clear").css({'height':(($j(document).height())/2.7)+'px'}); 
} 

Answer 2

Используйте parseFloat, как вы разделили высоту на 2.7 так будет соответствующий результат.

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