如何让一个元素占据另一个元素的高度

Question

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

我创建了这个 jquery 并且它可以工作，但是当我调整 window 的大小时它不起作用。我认为解决此问题的方法可能是每当我调整 window 大小时执行 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有时有效，有时无效。现在它完美地工作了！

Answer 1

使用 resize 事件：

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

Answer 2

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

$(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 事件。浏览器经常触发该事件 ;)

如何让一个元素占据另一个元素的高度

How to make an element to take another element height

jquery

resize