ReactJS - ant design - Fix Footer with Layout

Question

I am using ant design framework in my project with reactjs. I am trying to achieve a layout design in which the footer should stick to the bottom of the screen and header fixed to the top, only content should resize it should look like

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

Below is my live example what I am trying to do

https://codesandbox.io/embed/j4rkr509o3

I am not sure how to make it work, it would be very kind if any one can help me.

Cheers.

Answer 1

I don't believe ant supports this automatically, but you can just set the height of the content div to be 100vh - (header.height + footer.height). So in your example something like this:

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

Answer 2

You can try adding position: sticky to your <Header> and <Footer> , and specify the location (ie top, bottom ) you want them to stick to.

To achieve your goal, you can try:

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

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

Hope that helps, cheers :)

Answer 3

you can add {{position: 'sticky'}} and place the Footer outside of the Content

here is an example with sticky footer

Answer 4

You can use style={{ minHeight: "100vh" }} for Layout component. Works for me. For example like this:

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

Answer 5

You can use the Sider for side bar and set position: absolute to the main layout with 100% height and width

Here codesandbox

Also it was not working the layout component because you did not include antd.css for codesandbox

Answer 6

Make your own sticky footer https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Then populate the rest of your site with AntD components.