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

原文由 conquester 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您将主容器设置为 100vh，即 100% 的视口高度，并使其成为具有 flex 列方向的显示子容器，那么您只需将结果容器设置为 flex: 1 即可占用所有剩余空间并通过设置 overflow: auto 使其内容滚动

这种方法的好处是您可以让过滤器容器具有任何/动态高度并且它仍然可以工作。

 <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

原文由 Markus-ipse 发布，翻译遵循 CC BY-SA 4.0 许可协议