如何将 Ant Design Table 放置在 React 下的父容器边界中？答案

【问题标题】：How to place Ant Design Table in parent container bounds under React?如何将 Ant Design Table 放置在 React 下的父容器边界中？
【发布时间】：2018-11-25 00:25:24
【问题描述】：

我开发了一个 SPA 应用程序，我希望将表格放置在父元素边界中，但我无法设置显式高度。我可以设置表体的scroll.y，但结果总高度因标题高度而变大。我无法获得标题高度来计算所需的总高度。如何将表格放入父边界？

<div style={{ width: '100vw', height: '100vh'}}>
<Table scroll={{ y: '100%' }} style={{ width: '100%', height: '100%' }}  pagination={false} columns={columns} dataSource={data} />

【问题讨论】：

这对你有用吗？

标签： reactjs html-table parent bounds antd

【解决方案1】：

似乎这更像是 Ant 中的 CSS 问题，而不是错误。这是浏览器的限制。
尝试使用与calc 混合的vh 单位：

示例：

scroll={{ y: 'calc(100vh - 4em)' }}

Related Github discussion（需要翻译）

【讨论】：

将近一年后？我什至不记得回答了:)

【解决方案2】：

设置一个数字，而不是设置 scroll={{ y: '100%' }}。因为 scroll y 只需要一个数字，而 scroll x 需要一个数字或布尔值。

【讨论】：

这不是真的。 Docs state: "设置垂直滚动，也可以用来指定滚动区域的宽高，可以是数字、百分比值、true和'max-content'"
@vsync，CodingisLife 的说法并非不正确。他没有说 scroll x 只需要一个数字或布尔值，而是它确实需要一个数字或布尔值。他只是没有包括除了这两种类型之外，它还将接受百分比值和字符串“max-content”。然而，他的主要观点是 y 只需要一个数字