CODEWITHSUNDEEP
cssreactjsantd
Maifee Ul Asad
Maifee Ul Asad

Reputation: 4607

Antd footer style doesn't stay at the bottom

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

enter image description here

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?

Upvotes: 0

Views: 1077

Answers (3)

Furkan Gökmen
Furkan Gökmen

Reputation: 81

This will work fine for me.

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

Upvotes: 3

Minimumspace
Minimumspace

Reputation: 339

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

Upvotes: 2

Abhay Srivastav
Abhay Srivastav

Reputation: 774

Add this css to avoid overflow of the content

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

Upvotes: 2

Related Questions