0

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

为了更具描述性，我试图完成它是让我的 div 行为（在浏览器窗口 rezise 上）作为具有文本内容和属性宽度的普通 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);
    }
    });

任何帮助将不胜感激！

4

3 回答 3

1

你可以忘记为此使用 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，您甚至可以通过媒体查询为移动设备禁用它。

于 2013-05-02T20:08:00.307 回答
1

这就是事件监听器的用途。您可以将代码放入一个函数中，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();

});
于 2013-05-02T18:33:32.597 回答
1

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

例如：

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

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

这是一个演示代码运行时间的JSFiddle 示例。

于 2013-05-02T18:31:32.930 回答