将div高度更改为动态

Question

我用下面的代码来改变div的高度，使其与其父div的高度相等。

$('#infodiv').css("height",$("#infocol").outerHeight());

问题是，如果我加载新的内容，子元素#infocol的高度不再是动态的。是否有一种方法，使子元素再次动态后，我已经设置了高度与上述代码?

我已经尝试在内容加载相同的代码后重新配置其高度，但到目前为止还没有工作。

Answer 1

有一个方法可以解决这个问题使用ResizeObserver

但是，请注意在某些浏览器中不支持它，请查看我链接的页面以了解更多详细信息。下面是一个工作示例:

$(function () {
$("#add-content").click(function () {
$(".first-col").append("<p>More dynamic content...</p>");
});

// keep the second-col same size as first
$(".second-col").css('height', $(".first-col").outerHeight());

const resizeObserver = new ResizeObserver(function (entries) {
for (let entry of entries) {
// once one of the entry changes we want to update the other size too!
$(".second-col").css('height', $(entry.target).outerHeight());
}
});

// We need to pass the actual DOM node, hence the [0]
resizeObserver.observe($(".first-col")[0]);
});

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 23.5rem;
margin: 1rem auto;
}
.first-col {
background: cornflowerblue;
}
.second-col {
background: crimson;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="first-col">
<p>Some content</p>
<p>Some content</p>
<button id="add-content">Add content</button>
</div>
<div class="second-col"></div>
</div>

虽然，我建议在实现它之前，你看看flex是如何工作的，甚至min-height可能是解决这个问题的合适工具。如果您没有选择，请随意使用ResizeObserver，但它被认为是一种特殊的解决方案!