A simple CSS solution for having a footer that always stays at the bottom
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CNAME
demo.css
demo.html
readme.md
sticky-footer.css

readme.md

Sticky Footer

The solution to creating a sticky footer is incredibly easy nowadays thanks to Flexbox. Have a DOM that follows this structure:

<body>
  <div>
    Place all of your website in this div.
    It doesn't even have to have a class!
  </div>

  <footer>
    This footer will hug the bottom no matter what its height.
  </footer>
</body>

And then this CSS, which you can download here.

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

That's all there is to it. You can view a demo here. Enjoy!