React how to dynamically set div height to follow suit of full window height including scroll
I reproduced the scenario and I got to this. Hope it helps.
Why is it always growing?
In my case, document.body.scrollHeight
is returning the height of the body with its margin (for some reason), so every time the component height is set it keeps being smaller than the body's scrollHeight and given that the body grows with its children, with the resize, the component just keeps growing.
For Example:
componentDidMount :
bodyHeight = 90 + 10 (a margin)
scrollHeight = 100
componentHeight = 100
newBodyHeight = 100 + 10
Resize:
bodyHeight = 100 + 10
scrollHeight = 110
componentHeight = 110
newBodyHeight = 110 + 10 , and so on.
How to remedy it?
You could subtract the margin of the body from the scrollHeight or calculate the height from the component's children's height.
I just changed this:
updateDimensions() {
const margin = 16; // In my case was marginTop: 8px and marginBottom: 8px
const heightSet = document.body.scrollHeight - margin;
this.setState({ heightSet });
}
import React, { useRef, useLayoutEffect, useState } from "react";
const Home = props => {
const targetRef = useRef();
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
const [initVal, setInitVal] = useState(0);
const [height, setHeight] = useState({});
useLayoutEffect(() => {
if (targetRef.current) {
setDimensions({
width: targetRef.current.offsetWidth,
height: targetRef.current.offsetHeight
});
setHeight({
height: targetRef.current.offsetHeight + "px",
border: "1px solid red"
})
}
}, []);
const hanleInput = (e) => {
setInitVal(e.target.value);
}
const increaseHeight = () => {
let totalHeight = Number(dimensions.height) + Number(initVal);
setDimensions({
width: targetRef.current.offsetWidth,
height: totalHeight
});
setHeight({
height: totalHeight + "px",
border: "1px solid red"
})
setInitVal(0);
}
return (
<div ref={targetRef} style={height} >
<p>{dimensions.width}</p>
<p>{dimensions.height}</p>
<input type="number" value={initVal} onChange={hanleInput} />
<button onClick={increaseHeight}>increaseHeight</button>
</div>
);
};
export default Home;