Skip to content

v4 sticky footer example with flexbox#23143

Closed
sepiariver wants to merge 1 commit intotwbs:v4-devfrom
sepiariver:sticky-footer-example
Closed

v4 sticky footer example with flexbox#23143
sepiariver wants to merge 1 commit intotwbs:v4-devfrom
sepiariver:sticky-footer-example

Conversation

@sepiariver
Copy link
Copy Markdown

@sepiariver sepiariver commented Jul 23, 2017 •
edited
Loading

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.

@sepiariver
v4 sticky footer example with flexbox
ece4799 
fix body height css

sticky footer example flexb
@istratos
Copy link
Copy Markdown

istratos commented Jul 24, 2017 •
edited
Loading

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
Copy link
Copy Markdown
Author

sepiariver commented Jul 25, 2017

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
Copy link
Copy Markdown
Member

XhmikosR commented Jul 30, 2017

Why don't you use the helper classes instead?

@andrerom
Copy link
Copy Markdown

andrerom commented Sep 14, 2017 •
edited
Loading

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?

@XhmikosR XhmikosR requested a review from mdo September 27, 2017 07:53
@ysds
Copy link
Copy Markdown
Contributor

ysds commented Jul 25, 2018 •
edited
Loading

Solved by #26674 so you can close this.

@mdo mdo closed this Jul 25, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mdo mdo Awaiting requested review from mdo

Assignees

No one assigned

Labels

docs examples on-hold v4

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@sepiariver @istratos @XhmikosR @andrerom @ysds @mdo @Johann-S