CSS: Creating fixed header and footer while having dynamic context using flexbox

Question

I am trying to set a fixed header and fixed footer where the inner content container can be any size and it doesn't effect the header/footer size. I am a bit stuck and can't tell if I am using flex-basis incorrectly here for the .container div styling ?

.container {
  display: flex;  
  flex-direction: column;
}
.container div {
  flex-basis: 50px;
}

.header {
    background: red;
}
.content {
    background: pink;
}
.footer {
    background: green;
}

<div class="container">
    <div class="header"></div>
    <div class="content"> 

    <div class="footer"></div>
</div>

Dear @Ricardo: I have tried to answer your question. Please have a look. Hope this is what you were looking for :) Even, if you do not set the height then using f`lex:1` on `.content` will make sure your content grows with the text:) — Imran Rafiq Rather, Jan 13 '21 at 06:16
thanks Imran! I didn't think of using `justify-content: space-between` to keep them apart vertically, thanks! I just posted another answer as well after playing around with it...does my solution work as an option ? — RicardoAlvveroa, Jan 13 '21 at 06:18
Hi friend :) I have mention using `flex:1;` as well in my answer. which actually is a short form for... `flex-grow:1;` `flex-shrink:1;` `flex-bases:auto;` So I have it covered my friend as well... Please check my last updated answer :) — Imran Rafiq Rather, Jan 13 '21 at 06:20

score 2 · Accepted Answer · answered Jan 13 '21 at 06:11

You should set a min-height to your container and use justify-content:space-between; Also, use flex:1 on .content so that it takes the avaible space in between :)

Here is the full code:

.container {
  display: flex;  
  flex-direction: column;
  min-height:100vh;
  justify-content:space-between;
}
.container div {
  flex-basis: 50px;
}

.header {
    background: red;
}
.content {
    background: pink;
  flex:1;
}
.footer {
    background: green;
}

<div class="container">
    <div class="header"></div>
    <div class="content"> 

    <div class="footer"></div>
</div>

score 0 · Answer 2 · answered Jan 13 '21 at 06:17

I just came up with this using flex-grow: 1 on the content section to take up all the inner space. Is this a viable option?:

body {
  background: grey;
}
.container {
  display: flex;  
  flex-direction: column;
  height: 100vh;
}
.header {
    background: red;
    flex-basis: 50px;
}
.content {
    background: pink;
    flex-grow: 1;
}
.footer {
    background: green;
    flex-basis: 50px;
}

<div class="container">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

score 0 · Answer 3 · answered Jan 13 '21 at 06:25

Look, this is the usual solution to fixing header and footer to flex.

Where for .header and .footer you give a fixed height - flex-basis: 50px, but you give the flex: 1 0 auto in .content to accommodate this container in free space.

Also, add this to your css to exclude unnecessary indentation of the body tag, as well as rule box-sizing: border-box:

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

And still not an important point. Set height for .container container - min-height: 100vh.

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;  
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background: red;
    flex-basis: 50px;
}

.content {
    background: pink;
    flex: 1 0 auto;
}

.footer {
    background: green;
    flex-basis: 50px;
}

<div class="container">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

Hi mate! May I know how is your answer different from mine ;) `flex-shrink:0` Right :) ? — Imran Rafiq Rather, Jan 13 '21 at 06:32

score 0 · Answer 4 · answered Jan 13 '21 at 06:27

I am a bit confused but may be this is what you want:

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            display: flex;
            flex-direction: column;
        }
        .container div {
            flex-basis: 100vh; /* No need to use that in all DIVs, just the content */
        }
        .header, .footer {
            position: fixed;
            width: 100%; /* whatever you want */
            height: 8vh; /* whatever you want */
        }
        .header {
            top: 0;
            background: red;
        }
        .content {
            background: pink;
            height: 100vh;
        }
        .footer {
            bottom: 0;
            position: fixed;
            background: green;
        }

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

CSS: Creating fixed header and footer while having dynamic context using flexbox

4 Answers4