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 代码）