将div调整为自动大小，然后在调整窗口大小时将其高度设置为彼此相同？

Question

I have three column divs I would like to resize so that they are all the same lenghth. I have been able to do this upon page load by executing the following function (which I found on SO though unfortunately I am unable to find it now to give attribution, will update if I can find it):

function resizeIt()
{   
var largest = 0;

$(".feature").each(function(){ //loop through each section
   var findHeight = $(this).height(); //find the height

   if(findHeight > largest){ //see if this height is greater than "largest" height
      largest = findHeight; //if it is greater, set largest height to this one
   }
});

$(".feature").css({"height":largest+"px"});
}

This works fine, but I also want the divs to resize each time the window resizes. So I modified the function and then call it each time the window resizes and call the function then as well as upon page load. Here is the modified function (first line of function is the addition) plus the function call for a window resize:

function resizeIt()
{
$(".feature").css({"height: auto"});

var largest = 0;

$(".feature").each(function(){ //loop through each section
   var findHeight = $(this).height(); //find the height

   if(findHeight > largest){ //see if this height is greater than "largest" height
      largest = findHeight; //if it is greater, set largest height to this one
   }
});

$(".feature").css({"height":largest+"px"});
}
resizeIt();   

$(window).resize(function(){
resizeIt();
});

Now my div's do not resize properly upon page load or upon page resize. Nothing happens at all. If I put some kind of alert in my function, it is not called when the

$(".feature").css({"height: auto"});

line is included in the function. Why is this line breaking my code? The object does exist when I call it on the first line, so it's not a null object.

Answer 1

Why not try resizing with media queries? This will allow the divs to resize upon window resizing without need for page reload

@media (max-width: 1200px) {
.feature {
/*new height value*/
/*new width value*/
}
}
@media (max-width: 767px) {
.feature {
/*new height value*/
/*new width value*/
}
}