For a recent web app project, I had to build a footer that would always stick to the bottom of page, using CSS only. My first instincts led me to the
position: fixed; property, but it turns out the client didn’t want the footer visible at all times. They wanted it to behave as follows:
- The footer should be visible if the content above it is shorter than the user’s viewport height.
- If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.
position: fixed;property (which would keep the footer at the bottom of the viewport at all times, regardless of the above content).
Below is a small pen demonstrating my solution, and it works fabulously. Feel free to use this method on your next project.