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

This will work fine for me.

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