布局material-ui文档中的两个demo答案

【问题标题】：Layout two demos from material-ui documentation布局material-ui文档中的两个demo
【发布时间】：2019-09-14 20:22:20
【问题描述】：

我正在尝试结合 material-ui 文档中的两个演示。

Clipped under the app bar - 这是页面布局
Fixed header - 这是一个带有固定标题的表格。

我希望表格采用所有可用的页面高度，但仍然有一个固定的标题。

问题是右侧的“fixed-header”表格没有粘贴它的标题，有一个页面滚动条并且标题随页面向上滚动。除非我在表中添加maxHeight（类似于原始的“固定标题”演示）。但是，maxHeight 我无法将表格放入整个页面高度...

这是一个 CodeSandbox 演示问题。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

要使用这个 position:sticky 属性，父元素必须有一个定义的高度。

在您的情况下，可以将某些东西定义为高度：100vh。

查看 index.html

https://codesandbox.io/s/material-demo-v44v6

演示工作

https://v44v6.csb.app/

<style>

       .makeStyles-tableWrapper-130{
          height: calc(100vh - 84px);
        }
        .makeStyles-content-5{
          padding: 24px 24px 0;
          flex-grow: 1;
          height: auto;
          box-sizing: border-box;
        }

</style>

【讨论】：

这是一个很好且有效的解决方案，但 84px 和 100vh 编码太硬了。如果没有更好的解决方案，我会粗暴地接受这个。
100vh 是动态的，它对应于窗口的高度。 84px 是 header + margin-bottom 的高度，所以它不会粘在一起
没有办法“让”父母“决定”身高吗？

【解决方案2】：

不要使用硬像素值，您可以使用视口高度

const useStyles = makeStyles({
  tableWrapper: {
    height: "100vh",
    overflow: "auto"
  }
});

在这里演示：https://0qy7e.csb.app/

【讨论】：