用jquery调整div高度 [英] Resize div height with jquery

问题描述

我试图根据browzersize动态调整div高度，并基于此脚本（找到 here）：

  $（document）.ready（function（）{
 setHeight（'。col'）; 
}）; 
 
 var maxHeight = 0; 
函数setHeight（column）{
 //获取具有class = col 
 column = $（column）的所有元素; 
 //循环所有列
 column.each（function（）{
 //存储最高值
 if（$（this）.height（）> maxHeight） {
 maxHeight = $（this）.height（）;; 
} 
}）; 
 //设置高度
 column.height（maxHeight）; 
} 
  

脚本很好，我只需要它在浏览器窗口为了响应的目的而调整大小。

这样做是有道理的：

  $（window）.resize（function（）{
 setHeight（'。col'）; 
}）; 
  

，然后重设maxHeight......

没有bueno - 任何想法？ Working jsFiddle Demo

第一次 setHeight 函数runned，初始化元素的 height 。
并且第二次，总是返回相同的高度。您必须在循环之前从它们
中删除 height ：

  column.css（'height'，'auto'）; 
  

并且，您的 var maxHeight = 0; 必须在你的函数本身中：

$ $ $ $ $ $ $ $ $（$）$（$） .col'）;
}）;


函数setHeight（列）{
var maxHeight = 0;
//获取具有class = col
column = $（column）的所有元素;
column.css（'height'，'auto'）;
//循环所有列
column.each（function（）{
//存储最高值
if（$（this）.height（）> maxHeight） {
maxHeight = $（this）.height（）;
}
}）;
//设置高度
column.height（maxHeight）;


$ b $（window）.resize（function（）{
setHeight（'。col'）;
}）;

I'm trying to resize div heights dynamically based on browzersize, and based on this script (found here ):

$(document).ready(function() {
    setHeight('.col');
});

var maxHeight = 0;
function setHeight(column) {
    //Get all the element with class = col
    column = $(column);
    //Loop all the column
    column.each(function() {       
        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
    //Set the height
    column.height(maxHeight);
}

script works great, I just need it to also run when a browser window is resized for responsive purposes.

It would make sense to do something like this:

$(window).resize(function() {
setHeight('.col');
});

and then also reset the "maxHeight" somehow...

No bueno - any ideas?

解决方案

Working jsFiddle Demo

For thie first time that setHeight function runned, the height of elements initialized. And for the second time, always the same height will be returned. You must remove the height from them before your loop:

column.css('height', 'auto');

And, also your var maxHeight = 0; must be in your function itself:

$(document).ready(function() {
    setHeight('.col');
});


function setHeight(column) {
    var maxHeight = 0;
    //Get all the element with class = col
    column = $(column);
    column.css('height', 'auto');
    //Loop all the column
    column.each(function() {       
        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });
    //Set the height
    column.height(maxHeight);
}


$(window).resize(function() {
    setHeight('.col');
});

这篇关于用jquery调整div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！