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.