适应Material UI表格的父元素高度？

Question

适应Material UI表格的父元素高度？

javascriptcssreactjsmaterial-uijsx

4

我想让表格的高度适应父容器的可用高度。理想情况下，我希望：

页脚始终停靠在父容器底部。
如果表格只包含几行，则页脚应保持停靠在底部。
如果表格包含的行数超过了父容器的高度限制，并且需要溢出，则溢出应仅对表格主体部分可见，而页脚应保持停靠在底部而不被推向下方。
尽可能使用弹性盒子方法（因为我认为这是一个弹性盒子场景）

我不希望出现以下情况：

height: 100vh 方法
涉及 calc (100vh - ***px) 方法（因为我希望在我的解决方案中使用任意组件层次结构的方法）
表格中存在固定高度
使用绝对/固定定位
没有第三方解决方案（如果可能的话）
使用 .offsetHeight 方法

示例：https://stackblitz.com/edit/react-8h5dpy 视觉示例：

- GeorgeCodeHub

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- froitag · Accepted Answer

将一个元素扩展到占用所有可用空间但不超过父元素高度的方法如下所示：

.parent {
   // use flexbox layout for children
   display: flex;
   flex-direction: column;
}
.childThatGrows: {
   // take as much space as available
   flex-grow: 1;        

   // don't take more space than available (elements are as high as their content by default)
   min-height: 0;       
   overflow: scroll;
}

为什么要使用 min-height: 0？请参考https://dev59.com/mVoV5IYBdhLWcg3wc-Ym#36247448。

以您的示例为例，可能如下所示：https://stackblitz.com/edit/react-wgbzpb。