Making a sticky footer

I'm trying to make a sticky footer but I can't seem to quite get it right. I really don't know how to describe this without showing some screen shot and some css. Here it is.

Right now my footer seems to be fixed because it will sit over content but I do not have fixed position set to it. Here is a screenshot of what happens

I would obviously like the footer to be pressed down by the content. Here is the css for the footer and the container:

Footer CSS

.footer {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
}

CONTAINER

body {
  color: $base-text-color;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: $base-background-color;
}

.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
  min-height: 100%;
}

APPLICATION HTML

<body>
  <%= render 'shared/top_bar' %>
  <div class="container">
    <%= render 'shared/errors' %>
    <%= yield %>
  </div>
  <%= render 'shared/footer' %>
</body>

Hopefully this is enough info. Thanks for the help!

Solution

With the given code I would do like this, where I set the container to full viewport height, subtract margin and footer height from it, and drop the absolute position.

This will keep footer at bottom when content is small, push it down when content grows.

One can use flexbox for this as well, though as long as the footer's height is known, this is the simplest and work very well cross browsers.

html, body {
  color: blue;
  margin: 0;
  background-color: lightgray;
}
.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
  min-height: calc(100vh - 18px - 40px);
}
.footer {
  height: 40px;
  width: 100%;
  text-align: center;
  background: lightblue;
}

  <div class="container">
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
  </div>
  <div class="footer">
    Footer
  </div>