如何使一个元素采用另一个元素高度答案

【问题标题】：How to make an element to take another element height如何使一个元素采用另一个元素高度
【发布时间】：2015-01-03 06:36:16
【问题描述】：

我创建了 2 个响应框，第一个框里面有图片，另一个框有文字。两者都有宽度：50%；和第一个盒子高度：100%。但是.. 每当我调整窗口大小时，我希望 2 号框的高度与 1 号框的高度相同。

我创建了这个 jquery 并且它可以工作，但是当我调整窗口大小时它不起作用。我认为对此的解决方案可能是在我调整窗口大小时执行 jquery，但我不知道如何。这就是我所做的：

<script>
var Box = $('.theElement');
$('.theElement2').css({ height: Box.height() });
</script>

感谢您的建议！最终解决方案如下所示：

var Box = $('.theElement');

$(window).load(function() {
$('.theElement2').css({ height: Box.height() });
});

$(window).resize(function() {
$('.theElement2').css({ height: Box.height() });
}).resize();

注意：我必须介绍加载功能，因为当我刷新页面时，jquery 有时可以工作，有时不能。现在它完美地工作了！

【问题讨论】：

标签： jquery resize

【解决方案1】：

使用resize 事件：

$(window).resize(function() {
    var Box = $('.theElement');
    $('.theElement2').css({ height: Box.height() });
}).resize();

【讨论】：

谢谢，但现在它只有在我调整大小时才有效。如果我在不调整窗口大小的情况下刷新页面，则 jquery 不起作用。我必须调整窗口大小才能执行。
@RussuGeorge -- 已编辑和修复。在事件末尾添加.resize()，自动触发事件。
非常感谢。真的很感激！ :D

【解决方案2】：

您可以做的是将高度的设置包装在一个函数中，然后在 DOM 准备好以及窗口调整大小事件时调用它：

$(function() {
    var setHeight = function() {
        var Box = $('.theElement');
        $('.theElement2').css({ height: Box.height() });
    });

    // Run on DOM ready
    setHeight();

    // Run on window resize
    $(window).resize(setHeight);
});

一些优化后见之明：如果同时执行许多计算，您可能需要考虑限制resize 事件。浏览器经常触发事件太频繁;)

【讨论】：