Accepted answer

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:

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


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


Make your own sticky footer

Then populate the rest of your site with AntD components.


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

here is an example with sticky footer


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 :)


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

  <Layout style={{ minHeight: "100vh" }}>

Related Query

More Query from same tag