ReactJS-蚂蚁设计-使用布局修复页脚

Question

我在我的项目中使用reactjs使用蚂蚁设计框架。我正在尝试实现一种布局设计，其中页脚应贴在屏幕底部，页眉应固定在顶部，只有内容应调整其大小，如下所示

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

以下是我想做的现场示例

https://codesandbox.io/embed/j4rkr509o3

我不确定如何使它起作用，如果有人能帮助我，那将非常好。

干杯。

Answer 1

您可以用于style={{ minHeight: "100vh" }}布局组件。对我有用。例如这样：

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

Answer 2

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

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

Answer 3

您可以尝试添加position: sticky到<Header>和中<Footer>，并指定top, bottom您希望他们坚持使用的位置（即）。

为了实现您的目标，您可以尝试：

<Header style={{ position: "sticky", top: "0" }}>

<Footer style={{ position: "sticky", bottom: "0" }}>

希望能有所帮助，加油:)