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.