html - 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

如果您将主容器设置为 100vh，即 100% 的视口(viewport)高度，并使其成为具有 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