Ant Design TabPane 最小高度 100%

Posted 2023-03-06

【中文标题】Ant Design TabPane 最小高度 100%

【英文标题】：AntDesign TabPane min-height 100%

【发布时间】：2019-12-24 01:44:44

【问题描述】：

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

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

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

【问题讨论】：

您希望窗口看起来如何？你尝试了什么？您刚刚发布了一个官方示例。

窗口应该在高度上扩展 100%，而不是根据 TabPane 中的内容增加高度。我尝试将 css min-height 应用于 TabPane 并对其应用一个类，但 TabPane 只有在您放入更多内容时才会变得更大。我想让 TabPane 的高度为 100%，无论是否包含内容。

那么为什么是最小高度而不是最大高度？

【参考方案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>