React how to dynamically set div height to follow suit of full window height including scroll

Question

I'm making a react redux app.

My view gets bigger as I add elements (or smaller as I remove them) but I can't get my background to follow suit correctly.

I've tried using scrollHeight to determine the size it should have :

https://i.imgur.com/HGHJgub.gifv

Here is my code :

constructor(props) {
    super(props);
    this.state = {
        heightSet: 0,
    };
    this.updateDimensions = this.updateDimensions.bind(this);
}

componentDidMount() {
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
}

updateDimensions() {
    this.setState({ heightSet: document.body.scrollHeight });
    console.log(document.body.scrollHeight);
}

render() {
    const divStyle = {
        height: this.state.heightSet + 'px',
    };
    return (
        <div style={divStyle}>
        </div>
    )
}

but All of this is clearly to be ditched. I'm not taking the right approach. It also touches on another issue of my app : It knows to add height to the view but not to remove it. Anybody know why it has this behavior and how to remedy it?

UPDATE :

CLARIFICATION the real issue is that this solution doesn't have any update on the var when I click "add component" and my scroll height increases. all in all the above solution is utter garbage. I like this idea : Set color for extra page parts visible during rubber band scroll (yeah it's a hack but that's fine by me)

from Shishir Arora and tksb

but it seems it does not work on modern browsers (at least not Chrome and latest Chrome is target N°1 for my app).

Answer 1

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 });
}