Sticky Footer with Flexbox

Sticky footer with flexbox

Yes, this is a normal set-up. That's what justify-content: space-between is supposed to do: Pin the first and last elements to the edges of the container.

main {  display: flex;  flex-direction: column;  justify-content: space-between;  height: 100vh;}
article { background-color: lightgreen; }footer  { background-color: orangered;  }body    { margin: 0; }

<main>  <article>inner div</article>  <footer>footer</footer></main>

Flexbox: scrollable content with sticky footer

Use overflow-y: auto;.

Read this: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

body {  margin: 120px;}
.flex-container {  display: flex;  width: 200px;  height: 200px;  border: 1px solid black;  justify-content: center;}
.flex-item {  box-sizing: border-box;  width: 150px;  border: 5px solid blue;  align-self: center;  background-color: red;  display: flex;  flex-flow: column;  max-height: 100%;}
.content {  background-color: grey;  flex: 1;  overflow-y: auto;}

<div class="flex-container">  <div class="flex-item">     <header>Header</header>     <div class="content">        A      <br>B      <br>C      <br>D      <br>E      <br>F      <br>G      <br>H      <br>I      <br>J      <br>K      <br>L     </div>     <footer>Footer</footer>  </div></div>

flexbox sticky footer

Add display: flex to .card.

That will allow the children to use the full height of .container.

It will also pin the footer to the bottom.

revised demo

For a more comprehensive fix (if necessary), you will need to switch the flex-direction of .container-inner to column, and make adjustments to the flex items to account for this switch.

revised demo

The reason why align-self: flex-end and margin-top: auto didn't work has to do with the flex lines in a multi-line flex container.

Essentially, because of the way align-content works, your footer cannot break out of its flex line and shift to the bottom of the container.

For a complete explanation, see this post:

How does flex-wrap work with align-self, align-items and align-content?

Issue with STICKY footer using FLEXBOX not staying at bottom of page if page is smaller than screen

Since you know the height of your footer, you can extend your content element, to be a minimum of 100vh, minus the height of the footer. I'm assuming it's your section element?

section {
  min-height: calc(100vh - 6%);
}

Possibly answered here already: CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Sticky flexbox footer not fixed to bottom

Note that on some mobile browsers, if an item's height is 100vh you will need to scroll down so see it in its entirety. This is intentional, and it has to do with the visible area changing as you scroll (for example in a lot of mobile browsers like Chrome, the toolbar at the top goes away when you scroll down):

This is completely intentional. It took quite a bit of work on our
part to achieve this effect. :)

The base problem is this: the visible area changes dynamically as you
scroll. If we update the CSS viewport height accordingly, we need to
update the layout during the scroll. Not only that looks like shit,
but doing that at 60 FPS is practically impossible in most pages (60
FPS is the baseline framerate on iOS).

It is hard to show you the “looks like shit” part, but imagine as you
scroll, the contents moves and what you want on screen is continuously
shifting.

Dynamically updating the height was not working, we had a few choices:
drop viewport units on iOS, match the document size like before iOS 8,
use the small view size, use the large view size.

From the data we had, using the larger view size was the best
compromise. Most website using viewport units were looking great most
of the time.

If you're looking for a way to circumvent this behavior, I suggest you read this: The trick to viewport units on mobile.

Sticking footer to bottom of page using flexbox and margin-top: auto; not working

In your CodePen, the empty gap below the footer is taken up by the padding: 700px on .testimonial-text. Removing it (or lowering it to a reasonable value) fixes the issue.

How to make a sticky footer using flexbox in IE11?

IE has a min-height bug and needs display: flex on the flex column containers parent, in this case the html

Fiddle demo

Update your CSS like this

*,*:after,*:before {  box-sizing: border-box;}html, body {  margin: 0;  display: flex;}body {  flex-direction: column;  min-height: 100vh;}main {  flex-grow: 1;}

<header>  Header</header><main>  <p>Main</p>  <p>Main</p>  <p>Main</p>  <p>Main</p>  <p>Main</p></main><footer>  Footer</footer>