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.

score 15 · Answer 1 · edited Jun 04 '21 at 23:30

15

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>

edited Jun 04 '21 at 23:30

Javad Yousefi

2,250
4
35
52

answered Jun 04 '21 at 20:37

Igor Popov

162
1
10

your example is really helpful for me when I was stuck in setting the footer at the bottom of the content Thanks, – Muhammad Ameen Sep 25 '22 at 16:56
This solution works well when the virtual keyboard shows up. – hhsm95 Oct 22 '22 at 19:15

score 12 · Accepted Answer · answered Sep 11 '18 at 19:21

12

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>

answered Sep 11 '18 at 19:21

James

1,100
1
13
29

I had tried to use `calc` but somehow it was deducting `50vh` than `50px`. – iphonic Sep 12 '18 at 05:41
Are you defining the height inline or in your less file? If via less, it could be you're having the problem reported here https://stackoverflow.com/questions/27256849/it-is-possible-to-use-vh-minus-pixels-in-a-css-calc. The answer has a simple fix. – James Sep 12 '18 at 13:45
Yes I am using `.less` I will try the solution, thanks. – iphonic Sep 12 '18 at 17:22
I had to do `minHeight: ...` to support pages larger than the browser window. – Matthew D. Scholefield Jan 11 '21 at 06:50
Thanks a lot, this formula works like a charm: `100vh - (header.height + footer.height)` – hhsm95 Oct 22 '22 at 18:58

score 9 · Answer 3 · answered Sep 11 '18 at 19:08

9

You can try adding position: sticky to your <Header> and <Footer>, and specify the location (i.e. 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 :)

answered Sep 11 '18 at 19:08

lyming90

185
2
10

`position: sticky` is no go if you want IE support – Yichz Sep 11 '18 at 19:12
@Yichaoz if you want IE support, another way I can think of is to use `position: fixed`. However by doing so, you'll have to do some additional styling to get to the desired look. – lyming90 Sep 11 '18 at 19:16

score 2 · Answer 4 · answered May 08 '20 at 16:05

2

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

here is an example with sticky footer

answered May 08 '20 at 16:05

Amir Danish

418
5
8

score 0 · Answer 5 · answered Sep 11 '18 at 19:29

0

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

answered Sep 11 '18 at 19:29

Yichz

9,250
10
54
92

It does solve, but I want the content to scroll within the screen above footer, and footer not to go out of screen, thanks for pointing out `antd.css` I was wondering why it doesn't render. – iphonic Sep 12 '18 at 05:40
that will be completely different solution, since the footer doesn't know if the body has overflow or not. you will need to layout manually without using Layout component, and set content container to
. where 70px is the height of the footer + header. but calc() is only supported IE11 +
– Yichz Sep 12 '18 at 16:33
Thanks, for reply I am not worried about IE right now, I tried to use calc to determine the height of the content, but there seems to be problem with this as in your case it turns to 30vh as it takes `70px` as `vh` not `px` which changes the whole thing. Can you put more light into it? – iphonic Sep 12 '18 at 17:21

score 0 · Answer 6 · answered Mar 29 '19 at 07:37

0

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.

answered Mar 29 '19 at 07:37

corysimmons

7,296
4
57
65

ReactJS - ant design - Fix Footer with Layout

6 Answers6