• 2019-10-19

    Sticky footer with flex


    Start a discussion

    There are many ways to create a sticky footer. I like the flex version the most.


    body {
      height: 100%;
    body {
      display: flex;
      flex-direction: column;
    .content {
      flex: 1;

    The HTML will look something like below.

      <div class="content">Content</div>

    Because .content has flex: 1, it will fill up the available height, but it will never push out existing elements like the footer.

    Source: Solved by Flexbox