如何根据另外两个元素的高度设置元素高度

Question

我需要一个组件的高度是页面上其他两个组件高度的总和。我在应用程序中使用React和Typescript。这些元素具有响应性，因此它们的高度不会是恒定的。我曾尝试在这两个组件上设置refs，然后计算组件的"clientHeight"值，但我在这方面遇到了很多问题。在React中有更好的方法吗？

Answer 1

您可以通过JS设置refs等，然后获取高度来实现这一点，但每次内容更改或窗口大小更改等时，您都需要重新计算。

我不知道你想要实现的确切布局，但你能不使用常规CSS吗？flex或grid应该能够完成这个

.grid {
display: grid;
grid-template-columns: repeat(1fr, 2);
}
.leftCol {
background: red;
grid-column-start: 1;
grid-row: 1 /  span 2;
}
.rightTopCol {
background: green;
grid-column-start: 2;
}
.rightBottomCol {
background: blue;
grid-column-start: 2;
}

<div class="grid">
<div class="leftCol">
<p>content content content</p>
</div>
<div class="rightTopCol">
<p>content content content</p>
<p>content content content</p>
<p>content content content</p>
<p>content content content</p>
</div>

<div class="rightBottomCol">
<p>content content content</p>
<p>content content content</p>
</div>
</div>

或

.flex {
display: flex;

}
.leftCol {
padding: 5px;
background: red;
}
.right {
background: yellow;
}
.rightTopCol {
padding: 5px;
background: green;
}
.rightBottomCol {
padding: 5px;
background: blue;
}

<div class="flex">
<div class="leftCol">
<p>content content content</p>
</div>

<div class="right">
<div class="rightTopCol">
<p>content content content</p>
<p>content content content</p>
<p>content content content</p>
<p>content content content</p>
</div>

<div class="rightBottomCol">
<p>content content content</p>
<p>content content content</p>
</div>
</div>

</div>