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

例如，如果访问者的视口为 1080 像素，则 div 高度应设置为 400 像素。

编辑：根据答案和 .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'});
});