使等高函数在窗口调整大小时可调整大小 [英] Make an equal height function resizeable on window resize

问题描述

我们不久前创建了一个非常基本的等高函数，效果很好.但是，我们的任务是在调整窗口大小时调整列高.它被融入到一个响应式，流畅的设计中.但是，无法理解典型的响应式用例的强大功能并没有将浏览器拖到整个地方以接受特定的断点.

We created a very basic equal height function a while back that works great. However, we've been tasked with making the column heights resize as the window is resized. It's being implemneted into a responsive, fluid design. But the powers that be don't understand that the typical responsive use case isn't dragging your browser all over the place to accept specific break points.

无论如何，这里在jsfiddle中提供了标记和js设置. http://jsfiddle.net/J6uaH/3/

Anyhow, got the markup and js setup in jsfiddle here. http://jsfiddle.net/J6uaH/3/

只是不太了解将窗口调整大小元素添加到高度.任何人都可以提供的任何帮助将受到极大的赞赏，并且如果有这样的事情，将给任何超级英雄加分！

Just can't quite wrap my brain around adding the window resize element to the heights. Any help that anyone can provide will be hugely appreciated and would give whoever super hero bonus points, if there was such a thing!

推荐答案

为什么不将事件侦听器添加到重新计算元素高度的窗口的resize事件中?

why not just add an event listener to the resize event of the window that recalculates the height of the elements?

但是，因为您已经为元素设置了固定的高度，所以需要重置两个元素的高度以获得新的最大尺寸.

however because you already set a fixed height to the elements, you need to reset the height of both elements to get the new maximum size.

尝试添加:

$(window).resize(function(){
    $('.group .module').css('height','auto');
    $('.group .module').equalHeight();
});

在Firefox中工作.这基本上对窗口的每次调整大小都起作用:

work in firefox. what this basicly does on every resize of the window:

1. 重置元素的高度，这意味着浏览器将根据其内容进行计算
2. 再次执行功能以使两个元素的高度相等

这篇关于使等高函数在窗口调整大小时可调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！