反應填充剩余高度而無需滾動

Question

我想填充屏幕上的剩余區域，但是height：100％屬性效果不起作用。

注意紅色輪廓區域，它是邊界的半徑。 突出顯示的黃色區域是屏幕上應該填充的剩余空間：

這是頁面的渲染方法。 第一個Box容器負責顯示表單輸入的組件。 第二個Box容器無法充滿整個頁面：

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

我嘗試過的一種方法是將Box的高度設置為100vh ：

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

但這會創建一個可滾動的頁面。 75vh會填充剩余區域，而不會創建滾動條。 但這是一個手動計算的值。 向每個頁面添加自定義視口大小是不可擴展的。 處理此問題的正確方法是什么？

編輯：這是index.css文件：

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

Answer 1

身體默認不是100vh

發生這種情況是因為默認情況下，body標簽使用的高度盡可能小：

您需要在車身標簽上增加height: 100vh才能更改該height: 100vh 。 使用height: 100%拉伸內部元素