Javascript 反应填充剩余高度，无需滚动

我想填充屏幕上的剩余区域，但“高度：100%属性”效果不起作用

请注意红色轮廓区域，它是边界的半径。突出显示的黄色区域是屏幕上应填充的剩余空间：

下面是页面的呈现方法。第一个框容器负责显示表单输入的组件。第二个长方体容器没有达到填充整页所需的效果：

render() {
    console.log("state: ", this.state);
    const {symbol, fromDate, toDate} = this.state;

    this.updateAPIData();

    return (
        <>
            <Box display='flex' flex='1' justifyContent='space-around'>
                <IndexSelector
                    id='index'
                    value={symbol}
                    onChange={this.onSymbolChange}/>
                <SeriesSelector
                    id='series'
                    seriesList={Form.seriesList}
                    onChange={this.onSeriesChange}/>
                <DateRange fromDate={fromDate} toDate={toDate} onChange={this.onDateChange}/>
            </Box>

            // The below container properties are not having any effect
            <Box height='100%' border='1px solid red' marginTop='50px'>
                <Graph instructions={this.getInstructions()} apiData={this.apiData} />
            </Box>
        </>
    )
}

默认情况下，Body不是100vh 这是因为默认情况下，主体标记使用的高度尽可能小：

---

您需要在您的身体标签上添加

height:100vh

，以更改该标签。在您可以使用

height:100%

拉伸内部元素后

是否尝试了“height:-webkit fill available”？您可以通过链接共享整个代码吗@征服添加代码笔意味着添加所有依赖项和代码。这是渲染功能，它是代码中唯一进行样式设置的地方。您应该将

height:100vh

添加到组件外部的顶级元素中，甚至可以添加到组件中。确保身体也没有衬垫或边缘。然后你可以把孩子的身高设置为100%。注意，在本例中，body和Box之间的每个孩子都需要100%的高度。我已经用index.css文件更新了这个问题，该文件设置了body容器的高度。还是同样的问题。1）检查边距和填充物。2） 检查您的图形是否可以更高（可以使用所有可能的高度）3）尝试删除图形以外的所有内容。可能是其他元素造成了这个空间（我有类似的下拉列表问题）

<Box height='100vh' border='1px solid red' marginTop='50px'>
   <Graph instructions={this.getInstructions()} apiData={this.apiData} />
</Box>

html, body, #root, #root > div {
  height: 100vh
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
  monospace;
}