我有 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>
最佳答案
在同一行的元素上,你可以使用 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>
关于html - 如何使多个元素的高度调整大小与调整视口(viewport)大小时发生的换行相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36434893/