动态增加反应表高度以填充屏幕大小

编程问答 2022-08-26

问题描述

在使用虚拟化 react-table (example that I'm working with) 时，是否可以根据浏览器窗口高度动态增加表格高度？

我的浏览器中有很多空白空间，我希望它会被填满，但我不希望表格溢出我的屏幕，只是上升到它的末尾（使用滚动条允许访问剩余的行，如果有的话）。

enter image description here

我尝试使用这个 flex Box css 代码，但它没有做任何事情。请注意，我已经成功地将此 css 代码用于不同的组件并且它有效。

.flexBox-container {
  display:  flex;
  height:  100vh;
  flex-direction:  column;
}


.test1 {
  display: flex;
  flex-grow:  1;
}

我可以看到 react-table 示例依赖于 FixedSizeList，它似乎修复了高度，这可能会禁用弹性框？我试图删除所有可选的道具，但没有奏效。

<FixedSizeList
  height={800}
  itemCount={rows.length}
  itemSize={35}
  width={totalColumnsWidth+scrollBarSize}
>
  {RenderRow}
</FixedSizeList>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flexboxflexboxreact-tablereact-table-v7reactjsreactjsreactjsreactjs