Jquery调整div高度相对于文档高度

Question

我正在尝试使用jquery动态调整div的大小，以便它在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'});
});