Question

我正在使用React中的Material UI创建多个滚动列。我有一种使用flex进行引导的方法，但是我无法将其翻译过来。我整理了一个演示方法，要求您知道要滚动的内容的大小（在本例中为AppBar）

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
}

.grid-container {
  height: calc(100% - 64px);
}

.grid-column {
  height: 100%;
  overflow-y: auto;
}

在此演示中，我将所有高度都设置为100％（html，body，＃root），然后创建了两个类grid-container，它们的高度为100％-AppBar height和grid-column高度为100％，并且汽车的溢位为y。

在Bootstrap中，我将这些类分别应用于row和column元素

.flex-section {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;

  overflow: auto;

  min-height: 100%;
}

元素上方没有关系，因为flex负责高度。

具体来说，我希望避免执行height: calc(100% - 64px)，因为这需要我事先知道元素的高度。我将要在某些页面上将一些内容放置在滚动区域上方，该区域将具有动态高的内容。

Answer 1

我决心重新创建以前在引导程序（https://jsfiddle.net/aq9Laaew/226591/）中所做的工作，实际上我也能够使其在Material UI中正常工作。而且由于无法在此特定用例（反应/材质UI可滚动列）上在线找到此类示例，因此希望对其他人有所帮助。

这里是示例：https://codesandbox.io/s/z24wl3n58m

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%;
}

.flex-no-shrink {
  flex-shrink: 0;
}

我所缺少的是在根目录上设置flex。完成此操作后，就可以利用flex-section，flex-col-scroll和flex-no-shrink（后者用于防止滚动上方的元素被压缩）

Answer 2

2020更新

FWIW我刚能够将这两个样式属性添加到Box组件中以实现可滚动的<div>列：

<Box style={{maxHeight: '100vh', overflow: 'auto'}}>...</Box>

Answer 3

您只需要固定导航栏即可。它将保留到顶部。之后，在grid container上添加一个填充，它将包含所有内容。您甚至可以提供百分比填充以确保响应速度。

这是工作代码和框：Fixed Navbar

让我知道问题是否仍然存在。

Answer 4

我发现使用Material UI的网格确实很难做到这一点，因为正如对另一答案的评论中指出的那样，如果没有“ flex-wrap：nowrap”，并且添加“ flex-wrap：nowrap”打破了Material UI的网格布局系统。

但是，我确实发现，如果我使用Material UI的Box而不是Grids，可以相当轻松地重现Josh Sherman的Layout with fixed header and independently scrolling columns。

在index.html中：

<style>
  body,
  html,
  #root {
    height: 100%;
  }
</style>

#root当然是由create-react-app创建的。

在App.tsx中：

import React from "react";
import { AppBar, Box, Toolbar } from "@material-ui/core";

function App() {
  return (
    <>
      <AppBar>
        <Toolbar />
      </AppBar>
      <Box flexDirection="column" display="flex" height="100%">
        <Toolbar />
        <Box flexGrow={1} display="flex" overflow="hidden">
          <Box overflow="auto">
             <!-- The contents of the left column go here -->
          </Box>
          <Box overflow="auto">
            <!-- The contents of the right column go here -->
          </Box>
        </Box>
      </Box>
    </>
  );
}

export default App;

具有独立滚动列的实质性UI网格

4 个答案:

2020更新