反应如何动态设置div高度以适应包括滚动在内的整个窗口高度

Question

我正在制作一个React Redux应用。

添加元素时视图变大（移除元素时视图变小），但是我无法让背景正确地跟随。

我试过使用scrollHeight确定它应该有的大小：

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

这是我的代码：

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

但是所有这些显然都被抛弃了。我没有采取正确的方法。它还涉及到我的应用程序的另一个问题：它知道要增加视图的高度但不能删除它。有人知道为什么会有这种行为以及如何纠正它吗？

更新：

澄清真正的问题是，当我单击“添加组件”并且滚动高度增加时，此解决方案在var上没有任何更新。总而言之，上述解决方案完全是垃圾。我喜欢这个主意：为橡皮筋滚动过程中可见的多余页面部分设置颜色 （是的，这很hack，但是我觉得很好）

来自Shishir Arora和tksb

但它似乎无法在现代浏览器上运行（至少不是Chrome浏览器，而最新的Chrome浏览器是我的应用程序的目标编号1）。

Answer 1

事实证明，你可以只使用 css 来做到这一点，而且技巧非常简单：

在您的导航栏组件中添加以下内容：

render() {
        return (
            <Navbar>
                <div className="top-nav-white" />

                ...content

            </Navbar>
        );
    }

并在CSS中：

.top-nav-white{
  background-color: white; // (or the color you want to be overflowing)
  height: 100px;
  width: 100%;
  position: absolute;
  top: -100px;
}

这样你就可以将背景颜色保留为html或body：

html{
}
body{
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: $fond;
}

因此，页面顶部和页面底部的溢出颜色将根据需要而不同。