v4 sticky footer example with flexbox #23143

sepiariver · 2017-07-23T08:14:55Z

In July 2017 flexbox support is at 97.48% (prefixed). In the past, the sticky footer element has relied on absolute positioning and a fixed height. The utility of a fixed height footer is limited, not to mention the unsightly mess created when the footer content expands beyond the predetermined fixed height.

With the use of flexbox, the sticky footer example CSS becomes lighter and the sticky footer element's height can be auto.

fix body height css sticky footer example flexb

istratos · 2017-07-24T00:12:08Z

justify-content: space-between will mess things up with more elements in the page.
I have achieved better results with this code:

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

.flex-grow {
   flex: 1 1 auto;
}

Now just add .flex-grow to your main .container and it will push the footer to the bottom.

sepiariver · 2017-07-25T06:20:08Z

Thanks @alanstratos that looks pretty good. Just to be clear, that will push down everything that comes after the .flex-grow element in the source. Not to say there's a problem with that—it could actually come in handy—but just to understand the ramifications, is that correct?

Another question: do you want to submit a PR with it, in which case I could close this one, or would you like me to incorporate it into this one?

Lastly it's worth mentioning IE11 has a bug that makes it incompatible with this whole approach, unless you can explicitly set a height on the <body>. To support IE11 a polyfill would be required. If it's deemed worth pursuing, I could add a polyfill specific to this bug, and this implementation of flex, to the PR. Thoughts?

XhmikosR · 2017-07-30T10:32:58Z

Why don't you use the helper classes instead?

andrerom · 2017-09-14T14:29:20Z

I tried to do more or less exactly the same thing when testing out boostrap 4.0-beta now (I have a variable height footer, editors can add stuff there), both using plain css with flexbox on body and footer, and using the flex box utility classes.

However both cases messes with the height of the navbar when page is bigger than screen size, seen this?

ysds · 2018-07-25T00:59:03Z

Solved by #26674 so you can close this.

v4 sticky footer example with flexbox

ece4799

fix body height css sticky footer example flexb

Johann-S added docs examples v4 labels Jul 23, 2017

XhmikosR requested a review from mdo September 27, 2017 07:53

XhmikosR added the on-hold label Sep 27, 2017

mdo closed this Jul 25, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v4 sticky footer example with flexbox #23143

v4 sticky footer example with flexbox #23143

sepiariver commented Jul 23, 2017 •

edited

Loading

istratos commented Jul 24, 2017 •

edited

Loading

sepiariver commented Jul 25, 2017

XhmikosR commented Jul 30, 2017

andrerom commented Sep 14, 2017 •

edited

Loading

ysds commented Jul 25, 2018 •

edited

Loading

v4 sticky footer example with flexbox #23143

v4 sticky footer example with flexbox #23143

Conversation

sepiariver commented Jul 23, 2017 • edited Loading

istratos commented Jul 24, 2017 • edited Loading

sepiariver commented Jul 25, 2017

XhmikosR commented Jul 30, 2017

andrerom commented Sep 14, 2017 • edited Loading

ysds commented Jul 25, 2018 • edited Loading

sepiariver commented Jul 23, 2017 •

edited

Loading

istratos commented Jul 24, 2017 •

edited

Loading

andrerom commented Sep 14, 2017 •

edited

Loading

ysds commented Jul 25, 2018 •

edited

Loading