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.
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>
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 :)
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With