Question

我有一个具有相似div的响应式布局，我正在应用Jquery，因此所有div都匹配具有更多内容的div的高度。但是，如果要重新调整浏览器窗口的大小，则所有div保持与加载页面时相同的高度，使文本超出div。每当用户调整浏览器窗口大小时，有没有办法以某种方式继续运行Jquery？

为了更具描述性，我正在努力实现它是让我的div表现（在浏览器窗口rezise上）作为普通div与文本内容和属性width：＃％;身高：自动;唯一的区别是所有div都匹配高度较大的div的高度。

以下是我所拥有的链接：http://as.sjsu.edu/cf/vaishak/equalizeTest/index.html

这是我最初获得最大高度的Jquery：

<script>
jQuery(function(){
var maxHeight = 0;
$(".box").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".box").height(maxHeight);
});
</script>

以下是更新窗口时仍无法正常工作的更新版本。

$(document).ready(function(){
    $(window).resize(function(event) {
        resizeDiv();
    });
    $(document).ready(function(){
        resizeDiv();
    });
    function resizeDiv(){
        var maxHeight = 0;
        $(".box").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".box").height(maxHeight);
    }
    });

任何帮助将不胜感激！

Answer 1

当然，您可以使用此处记录的JQuery .resize()事件：http://api.jquery.com/resize/

例如：

$(window).resize(function() { // YOUR CODE HERE });

然后每次窗口调整大小时，代码都会运行。

这是一个JSFiddle example，用于演示代码何时运行。

Answer 2

这是事件监听器的用途。您可以将代码放入一个函数中，比如normalizeBoxHeight()，然后在浏览器调整大小时（最初加载时）调用它。

看起来像这样：

jQuery(function(){

    var normalizeBoxHeight = function(){
        var maxHeight = 0;
        $(".box").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".box").height(maxHeight);
    }

    $(window).resize(normalizeBoxHeight);
    normalizeBoxHeight();

});

Answer 3

你可能会忘记为此使用JavaScript并使用纯CSS：

http://cssdeck.com/labs/ygq5x6k3

<div class="container">
    <div>First</div>
    <div>Second</div>
</div>

.container {
    display: table; /* optional */
    width: 100%; /* optional */
}

.container div {
    display: table-cell;
}

它灵活，可以根据需要使用尽可能多的“列”。由于它是纯CSS，您甚至可以通过媒体查询为移动设备禁用它。

修改Jquery以重置为浏览器窗口将重新调整大小

3 个答案: