Ant Design TabPane 最小高度 100%答案

【问题标题】：AntDesign TabPane min-height 100%Ant Design TabPane 最小高度 100%
【发布时间】：2023-03-08 05:40:02
【问题描述】：

使用 Ant.Design 选项卡https://ant.design/components/tabs/

如何在 TabPane 上设置样式，使其最小高度始终为窗口的 100% 高度，即使它是空的？

下面的例子应该用颜色#F5F5F5覆盖窗口

【问题讨论】：

您希望窗口看起来如何？你尝试了什么？您刚刚发布了一个官方示例。
窗口应该在高度上扩展 100%，而不是根据 TabPane 中的内容增加高度。我尝试将 css min-height 应用于 TabPane 并对其应用一个类，但 TabPane 只有在您放入更多内容时才会变得更大。我想让 TabPane 的高度为 100%，无论是否包含内容。
那么为什么是最小高度而不是最大高度？

标签： css reactjs flexbox height antd

【解决方案1】：

这对我有用。

<TabPane tab={tab.title} key={index}>
<Row>
  <Col style={{minHeight: "100vh", maxheight: "100vh"}}>
   Test
  </Col>
</Row>
</TabPane>

【讨论】：

【解决方案2】：

所以这也对我有用

   <Tabs
      onChange={() => {
      console.log("oi");
      }}
      type="card"
      style={{ background: "blue", height: "100%" }}
   >
   <TabPane
      tab="Tab 1"
      key="1"
      style={{ minHeight: "100vh", background: "red" }}
   >
      Content of Tab Pane 1
   </TabPane>
 </Tabs>

【讨论】：