Ensure footer always sticks to the bottom. -CSS

Question

I'm not currently a great front-end guy, and right now I have a problem with my footer in my application. I wrongfully gave it max-width in the css. Basically I want it to always be on the bottom of the page no matter what size the screen is or how much content is on the page. Here is a screen shot of what I'm currently working with.

Screenshot:

Notice how the footer is kinda floating there in the middle of nowhere. I'd like it to be at the very bottom of the page right there. And if the user were to adjust the screen the footer would remain at the bottom. Here is my current HTML and CSS

HTML:

<div class="footer">
  Copyright @ 2016 Lockdown Inc
</div>

CSS:

.footer {
  border-top: 1px solid #d3d5d5;
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  background-color: #d2d2d2;
}

Any help with this would be great.

Answer 1

This is the general idea. Without your markup, I can't give you a more specific answer, but this should do it. position: fixed; will keep it at the bottom of the window.

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

If you'd rather have it at the bottom of the page, not necessarily the window...

body,html {
  min-height: 100vh;
  position: relative;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

For reference, this is a good article on the differences between position: fixed; and position: absolute; , and why position: relative; is important when you use position: absolute; https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/