ReactJS - ant design - 用布局修复页脚

Question

我在我的项目中使用 ant 设计框架和 reactjs。我正在尝试实现一种布局设计，其中页脚应贴在屏幕底部，页眉固定在顶部，只有内容应调整大小它应该看起来像

--------------------------------
|          HEADER              |
--------------------------------
|       |                      |
|       |                      |
| LIST  |       CONTENT        |
|       |                      |
|       |                      |
--------------------------------
|          FOOTER              |
--------------------------------

下面是我正在尝试做的活生生的例子

https://codesandbox.io/embed/j4rkr509o3

我不确定如何让它工作，如果有人能帮助我，那将是非常友好的。

干杯。

原文由 iphonic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不相信 ant 会自动支持这个，但你可以将内容 div 的高度设置为 100vh - (header.height + footer.height)。所以在你的例子中是这样的：

 <Content>
   <div style={{ background: "blue", height: "calc(100vh - 55px)" }}>
      text
   </div>
</Content>

原文由 James 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以将 style={{ minHeight: "100vh" }} 用于 Layout 组件。为我工作。例如像这样：

   <Layout style={{ minHeight: "100vh" }}>
    <Header>Header</Header>
    <Content>Content</Content>
    <Footer>Footer</Footer>
  </Layout>

原文由 Igor Popov 发布，翻译遵循 CC BY-SA 4.0 许可协议