A sticky footer with css, using the ::after pseudo-element

The relevant part of the css is like so:

#sticky-container {
  min-height: 100%;
  margin-bottom: -60px;
}

#sticky-container::after {
    height: 60px;
    content: '';
    display: block;
}

#sticky-footer {
  height: 60px;
}

• The footer needs to be a fixed height.
• An :after pseudo element is used instead of another div too push the footer out of the way of the #sticky-container content.
• The #sticky-container gets a bottom-margin of negative the footer height to cancel out the pseudo element.

Check out an example page.