The official CSS3 logo

A webpage 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 – 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.

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;
}

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!

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.