ReactJS - муравей дизайн - исправить нижний колонтитул с макетом

Question

Я использую Ant Design Framework в моем проекте с реагировать. Я пытаюсь создать макет, в котором нижний колонтитул должен придерживаться нижней части экрана, а верхний колонтитул должен быть зафиксирован сверху, только размер содержимого должен изменяться, он должен выглядеть как

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

Ниже приведен мой живой пример того, что я пытаюсь сделать

https://codesandbox.io/embed/j4rkr509o3

Я не уверен, как заставить это работать, было бы очень любезно, если бы кто-нибудь мог мне помочь.

Приветствие.

Answer 1

Создайте свой собственный нижний колонтитул https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Затем заполните остальные части сайта компонентами AntD.

Answer 2

Я не верю, что ant поддерживает это автоматически, но вы можете просто установить высоту содержимого div равной 100vh - (header.height + footer.height). Итак, в вашем примере что-то вроде этого:

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

Answer 3

Вы можете использовать Sider для боковой панели и установить position: absolute для основного макета со 100% высотой и шириной

Здесь codesandbox

Также этоне работал компонент макета, потому что вы не включили antd.css для codesandbox

Answer 4

Вы можете попробовать добавить position: sticky к вашим <Header> и <Footer> и указать местоположение (т. Е. top, bottom), к которому вы хотите их привязать.

Чтобы достичь своей цели, вы можетепопробуйте:

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

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

Надеюсь, что помогает, ура :)