Footer Position with Flexbox

footer-position-with-flexbox.markdown

Footer Position with Flexbox

How to set footer position on bottom at least, using flexbox

A Pen by Rulo Kobashikawa on CodePen.

License.

index.html

<div class="container">
  <header>HEADER</header>
  <main>
    <h1>MAIN</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus sequi nulla praesentium laboriosam fugiat, reiciendis, cupiditate numquam temporibus, dolorem repellat blanditiis accusamus aspernatur corporis officiis sit veritatis molestias aperiam qui.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, consequuntur. Provident fugit quos consectetur vero libero, ut, quas similique porro tempora rerum dignissimos, itaque eveniet, eaque non eligendi necessitatibus inventore.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, rerum, deserunt. Harum dignissimos quasi consequatur nihil, sed. Iste, expedita laborum. Veniam deserunt optio laboriosam modi id nam! Nemo, deserunt totam!
    </p>
  </main>
  <footer>FOOTER</footer>
</div>

style.css

html, body {
  height: 100%;  
}
body {
  margin: 0;
}
.container {
  height: 100%;
  background: blue;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
header {
  background: cyan;
  flex-shrink: 0;
  flex-basis: 50px;
}
main {
  background: lime;
  flex: 1;
}
footer {
  background: orange;
  flex-shrink: 0;
  flex-basis: 60px;
}