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 并通过设置 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

另一个可能适用于古代浏览器的可能解决方案是将过滤器容器设置为位置：固定，然后确保直接跟随过滤器容器的元素具有 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

尝试从 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 3

我做了导航师height:15vh 紧随其后的是height:20vh 最后一个分区是height:65vh 将其添加到 100 vh 即设备总高度 您可以根据自己的意愿更改它并更改分区的高度。 滚动现在不会出现在桌面视图中

这是codepen的链接 它对我有反应，检查它是否有效。 （我使用了您提供的 pastebin 代码）

Answer 4

不要放弃！ 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 5

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