Antd footer style doesn't stay at the bottom

Question

Trying to make a footer with AntD which will actually persist at the bottom. And it does. But the main issue is that its style doesn't. Its styles get expanded into more areas.

Here is a to understand it better(look at the white section):

Approaches I have tested:

Layout
  Header
  Content
  Footer

And

Layout
   Layout
      Header
      Content
   Footer

Here is the codesandbox: https://codesandbox.io/s/fervent-williamson-sl9bsi?file=/src/CustomLayout.tsx

Any idea how to fix it by limiting the footer CSS to only the footer component?

Answer 1

In your customlayout you set the height on line 16.

You had this: <Layout style={{ height: "100vh" }}>

Change this To: <Layout style={{ height: "100%" }}>

Now it adjust the body to the height of the page

Answer 2

Add this css to avoid overflow of the content

.ant-layout-content{
  overflow-y: auto;
}

Answer 3

This will work fine for me.

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