ReactJS/CSS：如何根据其他元素高度设置 div 高度？答案

【问题标题】：ReactJS/CSS: How to set div height based on other element height?ReactJS/CSS：如何根据其他元素高度设置 div 高度？
【发布时间】：2021-09-11 22:42:21
【问题描述】：

我正在尝试将固定高度设置为 div，以强制溢出滚动。问题是，我在 useEffect 钩子中使用 JavaScript 执行此操作，但效果不佳。有时高度设置得很好，但大多数时候是错误的。

我在组件内部创建了一个函数，然后在 useEffect 挂钩中调用它：

const TweetsPanel: React.FC<TweetsPanelType> = ({ tweetsData }) => {

  function setHeightTweetsDiv() {
    const height = document.getElementById('last-boicotes')?.clientHeight;
    // the "last-boicotes" div it's in another component, in the same page.
    document.getElementById('tweets-content').style.height = `${height}px`;
  }

  useEffect(() => {
    setHeightTweetsDiv();
  }, []);

  return (
    <>
      <div>
        <h2>Tweets</h2>
      </div>

      <div id="tweets-content">
        // tweets
      </div>
    </>
);

似乎有效，但它设置了错误的高度。重新加载页面几次后，它可以工作：

DevTools inspect

Rendered code

我正在尝试修复高度以设置相等的高度。左边一栏会一直全显示，右边一栏总是比较大，所以我需要这个是固定高度的，左边的高度一样，溢出的内容是可以滚动的。

我不能使用 flex-box，因为在每一列里面都有一个 div 到标题和另一个到内容。我需要滚动的 div 位于主列 div 内。

HTML structure

如果有人知道如何以其他方式实现这一目标，请告诉我。

抱歉我的英语不好，提前谢谢。

【问题讨论】：

标签： javascript css reactjs next.js

【解决方案1】：

我解决了设置延迟调用 useEffect 挂钩中的函数的问题：

setInterval(setHeightTweetsDiv, 1000);

【讨论】：