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%，并使其以 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 2

不要放弃！刚开始时，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 3

尝试为父级也包含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>