• 2019-10-19

    Sticky footer with flex

    Author

    Jens Törnell

    Comments

    Start a discussion

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

    Solution

    html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

    Playground Full page

    The HTML will look something like below.

    <html>
<head></head>
<body>
  <div class="content">Content</div>
  <footer>Footer</footer>
</body>

    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