Finding the height of an element and then using that value to set the height of another element

Question

I am using react, typescript and tailwind. I want one element's height to match the height of another element. It would be very simple usually but I have a complicated div structure so I can't do it in a normal way. What I have attempted is to calculate the offsetHeight and offsetTopHeight, and set the second element's height this value. The code is below, but I have removed a lot of the other code not related to this to make it easier for y'all to understand.

const [offsetTopHeight, setOffsetTopHeight] = useState(0);
const [offsetHeight, setOffsetHeight] = useState(0);
const [totalHeight, setTotalHeight] = useState(0);

const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
    setTimeout(() => {
      if (ref.current != null) {
        setTopHeight(ref.current.offsetTop);
        setOffHeight(ref.current.offsetHeight);
        setTotalHeight(ref.current.offsetTop + ref.current.offsetHeight);
        console.log(
          "total height: ",
          ref.current.offsetTop + ref.current.offsetHeight
        );
        console.log("offset height: ", ref.current.offsetHeight);
        console.log("offset top: ", ref.current.offsetTop);
      }
    }, 300);
  }, []);

return (
<div id="this-div-copies-height" className={`h-[${totalHeight.toString()}px]`}></div>
<div id="this-div-sets-height" ref={ref}></div>
);

I set a timeout cause I read that it would delay the calculation of the height till after the element rendered. Even without the timeout the code doesn't work though. Offset height finds the height of the element, and offset top height finds the distance between the top of the screen and the top of the element. I have added these to get the distance from the top of the screen to the bottom of the element. Any help would be appreciated, thanks!

score 0 · Accepted Answer · answered Aug 05 '22 at 18:30

as your question title describes "Finding the height of an element and then using that value to set the height of another element" this will do the job :

import React, { useState, useEffect, useRef } from "react";

export default () => {
  const [height, setHeight] = useState(0);
  const ref = useRef(null);

  useEffect(() => {
    setHeight(ref.current.clientHeight);
  }, [setHeight]);

  return (
    <div>
      <div ref={ref}> element A : {height} </div>
      <div style={{ height: { height } }}>
        element B has the same Height as element A
      </div>
    </div>
  );
};

full sandbox here

score 0 · Answer 2 · answered Aug 05 '22 at 18:44

So first thing I would say is it be worth restructuring the divs? I always think using plain CSS to style non dynamic divs is better memory use but do understand there are times when this is necessary so assuming this going forward.

Omar Dieh's code seems to work nicely (except i think he meant <div style={{ height }}> instead of <div style={{ height: { height } }}>). However, I would add that react has a hook called useLayoutEffect which runs after the dom has loaded allowing for dom manipulation so you can get rid of that timeout with the - what im assuming is - arbitrary number of seconds. Read more here: https://reactjs.org/docs/hooks-reference.html#uselayouteffect

Thanks! It is working now!! I will try useLayoutEffect too and tell you how it goes. Will use layout effect make the height responsive too? Or could you suggest another way to do that please — Travis, Aug 12 '22 at 10:30

Finding the height of an element and then using that value to set the height of another element

2 Answers2