在Material UI中适合表格的父级高度吗? [英] Fit parent height for Table in Material UI?

问题描述

我希望桌子的高度适合父母的可用高度.理想情况下，我想要:

• 始终固定在父容器底部的页脚.

• 如果表包含几行，则页脚应保持停靠在底部.

• 如果表格包含的行数超出了其父代的高度，并且需要溢出，那么溢出应该仅对于表格主体可见，并且页脚应保持停靠在底部，而不能向下推动.

• 如果可能的话，采用flexbox方法(在我看来，这是一种flex方案)

我不想要的东西:

• 高度:接近100vh

• 涉及到计算(100vh-*** px)(因为我想在解决方案内部的任意组件层次结构中使用该方法)

• 表格中固定的高度

• 使用绝对/固定定位

• 没有第三方解决方案(如果可能)

• 使用.offsetHeight

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

视觉示例:

解决方案

增长一个项目以占用所有可用空间但不超过父级的高度可以像下面这样工作:

.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 as available (elements are as high as their content by default)
   min-height: 0;       
   overflow: scroll;
}

为什么min-height: 0?参见 https://stackoverflow.com/a/36247448/3066632 .

以您的示例为例: https://stackblitz.com/edit/react- wgbzpb .

I want the table height to fit the parent’s available height. Ideally, I want:

• The footer to always be docked at the bottom of the parent container.

• If the table contains a few rows, the footer should remain docked at the bottom.

• If the table contains more rows than fit the parent’s height and needs to overflow then the overflow should be visible only for the table body, and the footer should remain docked at the bottom and not be pushed downwards.

• A flexbox approach if possible (it seems to me that this is a flex scenario)

What I don’t want:

• A height: 100vh approach

• A calc (100vh - ***px) involved (because I want to use the methodology in arbitrary component hierarchies inside my solution)

• Fixed heights in the table

• To use absolute/fixed positioning

• No 3rd party solutions (if possible)

• To use .offsetHeight

Example: https://stackblitz.com/edit/react-8h5dpy

Visual Examples:

解决方案

Growing an item to take all available space but not exceeding the height of the parent could work like follows:

.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 as available (elements are as high as their content by default)
   min-height: 0;       
   overflow: scroll;
}

Why min-height: 0? See https://stackoverflow.com/a/36247448/3066632.

For your example this might look like this: https://stackblitz.com/edit/react-wgbzpb.

这篇关于在Material UI中适合表格的父级高度吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！