Search code examples
javascriptcssreactjslayoutantd

ReactJS - ant design - Fix Footer with Layout

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.

Solution

  • 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>