Force Bootstrap's variable height footer to the bottom of page or content, whichever is lower

Question

In my bootstrap page, I want to force the <footer>...</footer> to be at the bottom of the page or the content, whichever is lower.

And there is a solution for that already which works great. However, that approach requires that I know ahead of time what the height of the footer will be.

How do I achieve the same thing, but the footer height is determined by its content?

Answer 1

You can use flexbox to achieve sticky footer.

Using flex: 1 0 auto; to section will make it flexible, it will acquire all available free space in flex-container.

flex: <positive-number>

Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.Equivalent to flex: 1 0.

html,
body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  height: 1px; /* Height hack for IE */
}

header,
footer {
  padding: 10px;
  color: white;
  background-color: #000;
}

section {
  flex: 1 0 auto; /* This will make section flexible */
}

<header>Header</header>
<section></section>
<footer>Footer</footer>