A web page often contains too little content to fill the vertical height of the browser portal. This means that any attempt at a footer section looks silly as the footer and its content end up halfway up the screen. Any attempt at adding vertical spacing between your content and your footer section to remedy this ends up looking equally ridiculous on a page where the content is sufficient to fill that page.
Additionally, you may want the content of the footer section to remain visible — frozen or stuck — at the bottom of the page even when the contents of the page extend below the viewport.
Here are two different solutions.
Solution 1: fixed at bottom of page
In this solution, the footer remains at the bottom of the page and is not frozen at the bottom of the viewport. Too little content to fill the viewport and the footer is at the bottom of the viewport, but the footer moves out of the viewport once additional content is added.
See the Pen CSS: Using flex for a fixed footer by David Fox (@foxbeefly) on CodePen.
Solution 2: fixed at bottom of the viewport.
Minimum HTML below (see the Codepen for full code):
<p>An easy CSS technique to create a footer fixed at the bottom of the viewport.</p> <footer> <p><sup>©</sup> D Fox</p> </footer>
To create the idea of a footer as such we can adopt the following CSS:
footer {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background-color: #ff9900;
color: white;
text-align: center;
}
See the Pen CSS Fixed footer by David Fox (@foxbeefly) on CodePen.
If you examine the HTML in the two Codepens you will see that I have used some of HTML5’s semantic elements to give structure to my page, namely: <header>, <section>, <article> and <footer>. I have then styled the <footer> of the page as — you guessed it: a footer!