Search code examples
htmlcssscreenfootersticky-footer

Adding a footer that is always displayed at bottom of screen?

How can i add a footer that is always at the bottom of the screen even when the page contents are very small

e.g of problem, lets say I have a page that doesn't have that much on display in it, the footer therefore becomes in the middle of the screen. Can I ensure that if the page doesn't have a lot of contents then the footer just be at the bottom of the screen?

UPDATE

I just want a footer that is at the bottom of the screen when there is not enough content to fill the whole screen (i.e I don't want the footer showing up in the middle of the screen) and then if there is enough content for it to just go down at the bottom of the page.

Solution

  • You're after a "sticky footer", this article shows some of the techniques you can use:

    Here's the flexbox version: http://codepen.io/chriscoyier/pen/RRbKrL

    HTML:

    <body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

    CSS:

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