Search code examples
cssreactjsantd

Create a fixed footer in Ant Design

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. bug

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 not expanded expanded

Solution

  • 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