Friday, May 10, 2024
Homepage · css
 Popular · Latest · Hot · Upcoming
135
rated 0 times [  139] [ 4]  / answers: 1 / hits: 17288  / 6 Years ago, tue, september 11, 2018, 12:00:00

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.


More From » css
 Answers
34

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>

[#53519] Friday, September 7, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tayaw
Add To Favorites
Follow
Total Points: 749
Total Questions: 88
Total Answers: 86
Location: Djibouti
Member since Sun, Feb 27, 2022
2 Years ago
tayaw questions
Thu, Mar 3, 22, 00:00, 2 Years ago
Fri, May 7, 21, 00:00, 3 Years ago
Wed, Oct 7, 20, 00:00, 4 Years ago
Sun, Sep 6, 20, 00:00, 4 Years ago
Wed, Jun 17, 20, 00:00, 4 Years ago
View All
;