Question

我正在尝试为 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

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

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

Answer 1

我解决了设置延迟调用 useEffect 钩子内部函数的问题：

setInterval(setHeightTweetsDiv, 1000);

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

1 个答案: