ReactJS - 螞蟻設計 - 用布局修復頁腳

Question

我在我的項目中使用 ant 設計框架和 reactjs。 我正在嘗試實現一種布局設計，其中頁腳應該貼在屏幕底部，標題固定在頂部，只有內容應該調整大小，它應該看起來像

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

下面是我正在嘗試做的實時示例

https://codesandbox.io/embed/j4rkr509o3

我不知道如何使它工作，如果有人可以幫助我，那將是非常友好的。

干杯。

Answer 1

我不相信 ant 會自動支持這一點，但是您可以將內容 div 的高度設置為 100vh - (header.height + footer.height)。 所以在你的例子中是這樣的：

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

Answer 2

您可以嘗試將position: sticky添加到您的<Header>和<Footer> ，並指定您希望它們粘貼的位置（即top, bottom ）。

為了實現您的目標，您可以嘗試：

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

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

希望有所幫助，加油:)

Answer 3

您可以添加{{position: 'sticky'}}並將頁腳放在內容之外

這是一個帶有粘性頁腳的示例

Answer 4

您可以將style={{ minHeight: "100vh" }}用於布局組件。 為我工作。 例如像這樣：

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

Answer 5

您可以將Sider用於側欄並設置position: absolute到具有 100% 高度和寬度的主布局

這里的代碼和框

它也不能用於布局組件，因為您沒有為代碼和框包含 antd.css

Answer 6

制作自己的粘性頁腳https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

然后使用 AntD 組件填充站點的其余部分。