html - 如何使多个元素的高度调整大小与调整视口(viewport)大小时发生的换行相同？

Question

我有 2 个元素，其中包含不同数量的文本。当视口(viewport)足够宽时，它们的高度是相同的。调整大小时，每个元素都会通过改变彼此的比率来扩展它们的高度，这是由于自动换行以将其保留在框中。

我发现的所有解决方案都倾向于通过使用 min-height 属性来解决这个问题，方法是将两个框都扩展到最大高度，就好像它们已经被压扁了一样。但是，当视口(viewport)已经足够宽时，此解决方案会在较低的内容元素中留下大量空白。

我想让 2 个元素“相关”以注意是否一个 div 高度已经扩展，然后确保另一个元素也扩展，即使对于那个低内容元素没有必要。

不幸的是，由于自动换行，我的代码允许框延伸不同的高度:

<div style="border: 5px solid;">`
  <h1>Not much here to need to resize</h1>
</div>

<div style="border: 5px solid;">
  <h1>There are a lot of words to word wrap and thus resize my box element much more</h1>
</div>

Answer 1

在同一行的元素上，你可以使用 CSS flex-box。交叉线解决方案是 Javascript:

此函数在 body load/resize 上调用，选择第二个 div 的高度并应用于第一个 div。

document.body.onload = dsiz();
window.addEventListener('resize', dsiz);  

function dsiz() {
var hhh = document.getElementById("second").offsetHeight;
document.getElementById("first").style.height = hhh + 'px';
}

<div id=first style="border: 5px solid;">`
  <h1>Not much here to need to resize</h1>
</div>

<div id=second style="border: 5px solid;">
  <h1>There are a lot of words to word wrap and thus resize my box element much more</h1>
</div>

jsfiddle