Create a fixed footer in Ant Design - css

Question

I want to accomplish something like this with a fixed footer.
--------------------------------
| HEADER |
--------------------------------
| | |
| | |
| SIDE | CONTENT |
| BAR | |
| | |
--------------------------------
| FOOTER |
--------------------------------
I'm using Ant Design layout and I added a position fixed to the footer but I'm getting a weird bug when the sidebar groups are expanded that block some of the sidebar links.
Here is an example:
https://codepen.io/HugoLiconV/pen/jONBLJQ?editors=0010
EDIT:
The main problem is that if I expand the sidebar group that says "expand me" because there is a lot of links, the footer will hide some of the links. This happens especially a 1366 x 768 resolution

Answer 1

Here is a codepen link https://codepen.io/sniperdumbooo/pen/pozeZJb?editors=0010 for how you wanted to achieve with a fixed footer and centered content and sidebar big fixed
The changes made are removed display: 'flex' from footer and added textAlign: 'center' to the header part and added textAlign: 'justify' to the center body as:
<Header style={{ background: '#DDD', padding: 0, textAlign: 'center' }} >Header</Header>
<Footer style={{
borderTop: '1px solid #e8e8e8',
position: 'fixed',
left: 0,
bottom: 0,
width: '100%',
backgroundColor: 'white',
textAlign: 'center'}} >
textAlign: 'justify' ### to the div inside the <Content />
And the blocked sidebar links when expanded is due to the position: 'fixed' in the
<Layout style={{
overflow: 'auto',
minHeight: '100vw', ## make it minHeight: '100vw'
width: '100%',
left: 0 ### Removed the position: 'fixed'
}}>
Also remove style="padding: 24px" from div in html id="container"
<div id="container"></div>
will give you what you want to achieve with the bug fixed as in this link of codepen : Desired solution

Answer 2

You can add margin bottom same as footer height in px , please add below css and check,
.ant-layout-sider-children {
height: 100%;
margin-top: -0.1px;
padding-top: 0.1px;
margin-bottom: 95px;
}

Answer 3

hi i red all answers and i think there is an easier way for only using antd instead of using extra css
just use this kind of affix around your footer :
<Affix offsetBottom={0}>
and the document if you need :
https://ant.design/components/affix/

Answer 4

Unfortunately this can not (easily) be solved with CSS, and your best bet is to simply move the footer out one level, to the bottom of the parent <Layout>:
<Layout> <!-- Core layout -->
<Layout> <!-- Layout with Header and Content -->
</Layout>
<Footer style={{
borderTop: '1px solid #e8e8e8',
position: 'fixed',
left: 0,
bottom: 0,
width: '100%',
backgroundColor: 'white',
textAlign: 'center',
display: 'flex',}}
>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
This can be seen here.

Answer 5

Here, i have made a little change in your footer css and it looks fine.
<Footer style={{
borderTop: '1px solid #e8e8e8',
position: 'fixed',
left: 0,
bottom: 0,
width: '100%',
backgroundColor: 'white',
textAlign: 'center',}}
>
Hope this helps !

Answer 6

I had figured out a hack solution
import React, { FC, useEffect, useMemo } from 'react';
import { Table } from 'antd';
import { useMeasure } from 'react-use';
...
export const App: FC = () => {
const dataSource = ...
const columns = ...
...
/** Render */
const [ref, { height }] = useMeasure<HTMLDivElement>();
const tableTitleRef = useRef<Element>();
const tableHeaderRef = useRef<Element>();
const tableBodyRef = useRef<Element>();
const tableFooterRef = useRef<Element>();
const refs = (e: HTMLDivElement) => {
ref(e);
// 攔截 ref 呼叫，找到 title, header, body, footer element
tableTitleRef.current = e?.getElementsByClassName('ant-table-title')?.[0];
tableHeaderRef.current = e?.getElementsByClassName('ant-table-header')?.[0];
tableBodyRef.current = e?.getElementsByClassName('ant-table-body')?.[0];
tableFooterRef.current = e?.getElementsByClassName('ant-table-footer')?.[0];
};
/** 38、48 分別是沒有換行時的基本高度，當作 element 找不到時的 fallback default 值 */
const scroll = useMemo(() => {
return {
x: 1200,
y:
height -
(tableTitleRef.current?.clientHeight || 38) -
(tableHeaderRef.current?.clientHeight || 38) -
(tableFooterRef.current?.clientHeight || 48)
}
}, [height]);
useEffect(() => {
if (scroll) {
// 直接指定高度
if (tableBodyRef.current) tableBodyRef.current.style = `overflow: auto scroll; height: ${scroll.y}px;`;
}
}, [height, scroll]);
return (
<div ref={refs} style={{ height: '100%' }}>
<Table
scroll={scroll}
sticky={true}
columns={columns}
dataSource={dataSource}
pagination={false}
showHeader={true}
...
title={() => (
<TaskTableTitle
...
/>
)}
footer={() => (
<TaskTableFooter
...
/>
)}
/>
</div>
);
}