Material UI React 應用程序中沒有滾動條的全高和寬度

Question

我正在嘗試呈現全高頁面。 但它添加了一個不受歡迎的滾動條。 100% 高度是指屏幕的大小。

這是演示。 黃色突出顯示的部分是添加的不需要的高度。 還有一個水平滾動條（未突出顯示）：

這是頁面的渲染方法：

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>

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

這是 index.css：

html {
  box-sizing: border-box;
}

html, body, #root {
  padding: 0px !important;;
  margin: 0px !important;;
  height: 100vh;
  width: 100vw;
}

*, *:before, *:after {
  box-sizing: inherit;
}

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

如何避免這種額外的高度和寬度並使紅色邊框盒裝容器全高？

編輯：根據@gowatham 的建議，我試過了但沒有用。 我得到以下結果：

編輯 2：

HTML: https://pastebin.com/Qu2RFHe7 CSS: https://pastebin.com/1z3Zg5rv

Answer 1

不要放棄！ CSS 樣式在您剛開始時可能會很棘手，但在您規划頁面布局后，它實際上非常簡單。

我會做90vh的身體和一套10vh的過濾箱，你有以上，所以它永遠是只100vh頁面上，除非你想改變布局。 所以我會有這樣的事情：

return (
  <div style={{ height: '90vh', margin: 0, padding: 0 }}>
    <Box display='flex' flex='1' justifyContent='space-around' style={{ height: '10vh' }}>
        <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>

    <Box style={{ maxHeight: "100%", overflow: "auto" }}>
        <Graph instructions={this.getInstructions()} apiData={this.apiData} />
    </Box>
  </div>
)

請注意，您的邊框 1px 也可能會增加 100%，您可能會看到一個滾動條。 要強制隱藏滾動條，只需將overflow: hidden添加到父 div 即可。 CodeSandbox 上的示例：

Answer 2

如果您將主容器設置為 100vh，即視口高度的 100%，並使其以 flex 列方向顯示其子項，那么您可以通過將其設置為 flex: 1 來使結果容器占用所有剩余空間並通過設置溢出使其內容滾動：自動

這種方法的好處是您可以讓過濾器容器具有任意/動態高度，並且它仍然可以工作。

<Box height="100vh" display="flex" flexDirection="column">
  <Box>Filter</Box>
  <Box flex={1} overflow="auto">
    {Array.from(Array(100)).map((v, i) => (
      <div key={i}>Testing {i}</div>
    ))}
  </Box>
</Box>

https://codesandbox.io/s/material-demo-ntvoj

另一種可能在古代瀏覽器中也適用的解決方案是將過濾器容器設置為 position: fixed ，然后確保緊跟過濾器容器的元素具有 margin-top 或 padding-top 足以當頁面滾動到頂部時，防止其內容出現在過濾器 div 后面。

<Box
  position="fixed"
  top={0}
  height="60px"
  width="100%"
>
  Filter
</Box>
<Box marginTop="60px">
  {Array.from(Array(100)).map((v, i) => (
    <div key={i}>Testing {i}</div>
  ))}
</Box>

https://codesandbox.io/s/material-demo-4m85i

Answer 3

嘗試從 box2 高度減去 box1 高度創建一個對 box1 的引用：

ref={(ref) => this.box1 = ref}

然后在box2中：

height={`calc(100% - ${this.box1.clientHeight}px)`}

像這樣：

return (
    <>
        <Box display='flex' flex='1' justifyContent='space-around' ref={(ref) => this.box1 = ref}>
            <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>

        <Box height={`calc(100% - ${this.box1.clientHeight}px)`} border='1px solid red' marginTop='50px'>
            <Graph instructions={this.getInstructions()} apiData={this.apiData} />
        </Box>
    </>
)

Answer 4

嘗試為父級也包括Flex

<div display='flex' flex='1' height='100%' justifyContent='space-between'> //use flex direction column as per your library     
        <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>
        <Box>
            <Graph instructions={this.getInstructions()} apiData={this.apiData} />
        </Box>
    </div>

Answer 5

css 在父項中使用高度：'100vh' 而不是 100%。 100% 占據所有內容的最大高度。 之后就不會變大了。 100vh 用於整個 window 的垂直高度並檢查溢出-y

Answer 6

我將導航分區height:15vh與height:20vh和最后一個height:65vh添加到 100 vh，即設備總高度，您可以根據需要更改它並更改分區的高度。 滾動現在不會出現在桌面視圖中

這是代碼筆的鏈接它對我有反應，檢查它是否有效。 （我使用了您提供的 pastebin 代碼）