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。

编辑：根据答案更改了脚本，为.resize和.height更改了.jquery api，并删除了实时链接。

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

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

2 个答案: