CSS Footers - AppCode

This article demonstrates how to create several CSS footers for your webpage. Included are code walkthroughs and other footer examples.

What Is a Footer on a Web Page?

Many footers are often below a content’s main body at the bottom of a page. Often footers on websites contain contact information, terms of service, or even other products which enable users to contact businesses, read legal website documents, or even discover similar services. In simple terms, it is the bottom part of any site that contains links and information. These links and information can even include a sitemap to other pages on a website.

Web Page Footer Structure and Location Diagram

A fun fact is that the layout terminology comes from print media, in which the word “footer” is a common design element seen on the bottom of many document pages.

A footer can even help you gain traction on social media platforms by including social bars with icons leading to the website’s social media profiles. These social links ultimately create gain through new followers, conversions, and brand awareness.

Let’s go review items typically found in a website’s footer section.

Copyright
Sitemap
Privacy Policy
Terms of Use
Contact
Address and Link to Map / Directions
Phone Numbers
Emails
Navigation
Social Icons
Email Signup
Press
Latest Articles
Investor Relations
News
Events
Registration / Signup / Login
About Page

Creating a Static Footer

The following example will walk through creating a static footer that stays under the content and leaves the viewport when the user scrolls away from the bottom of a page.

The first task you will need to do is to create a structure of HTML elements. This structure will include <a> anchor link elements, a <p> paragraph element, and a <div> container element, and a few other elements. You’ll notice the structure uses the anchor links to create a home, login, and link to each page.

You will need to assign a .container class to the <div> element, so we have a root class to apply various styles to the child HTML elements.

Diagram Defining Four Columns Using CSS grid-template-columns

Above, an image diagram shows that within the structure is a row of containerized items: login, home, about, and copyright notice. A row is created with a CSS display property and a “grid” value to create a horizontal container. Then we tell the browser how to create each width within the grid row using grid-template-columns: 120px 100px 100px auto;. Each value within grid-template-columns defines a column and its width.

In addition to using a CSS grid, we utilize the :hover pseudo-class selector to give each of the three anchor links a hover effect. The hover effect changes the background color of each link.

Now that we’ve dissected the images above let’s move on and create some HTML structure for our page.

HTML

<div class="content">Content</div>
<div class="container">
  <p class="container-text-left">
    <a href="/login.html" class="menu login">login</a>
    <a href="/" class="menu">home</a>
    <a href="/about.html" class="menu">about</a>
    <span class="copyright">Copyright Example.com</span>
  </p>
</div>

Next, we need to add a few styles for several classes in the HTML above.

CSS

body {
  margin: 0;
}

.container {
  width: 100%;
  background-color: #d0daee;
  height: 80px;
}

.container .container-text-left {
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  display: grid;
  grid-template-columns: 120px 100px 100px auto;
  font-family: Arial;
  margin: 0;
  padding: 20px;
  text-align: right;
}

.container .menu {
  text-decoration: none;
  color: black;
  padding: 0 1rem;
  border-radius: 4px;
  margin: 0 0.5rem;
}

.container .menu:hover {
  background-color: #b3bed5;
}

.container .login {
  background: #3d5dec;
  color: white;
  padding: 0 2rem;
}

.container .login:hover {
  background: #2e48bc;
}

.container .copyright {
  font-size: 14px;
  color: gray;
  padding: 0 1rem;
  margin: 0 0.5rem;
}

.content {
   text-align: center;
    background: #927ac0;
    height: 400px;
    line-height: 400px;
    color: white;
    font-size: 20px;
    font-family: Arial;
}

Creating a Sticky Footer

Footer Which Sticks to Bottom of Page — Footer Example Which Sticks to the Bottom of a Page

Sometimes we might want to create a section of information that sticks to the bottom of the page instead of a static one that is positioned immediately after the content.

Two problems web developers may encounter and want to solve when creating footers are:

Sticking to a viewport window bottom when page content is short and the viewport is not filled, and
Staying at the document end while moving down as expected when there is more content than a viewport’s height (instead of overlapping).

There are several methods by which we can force a footer to the bottom of the page and solve both problems simultaneously.

First, we need to create some elements to apply styles, and then we will explore four methods using CSS, which all achieve a similar sticky result.

HTML

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

Each of these bullet point solutions demonstrates different ways to achieve the stickiness function.

Flexbox

Combining a flexbox property and the body element can turn the entire page into a flexbox. We can then set a content section to have a flex of 1, which results in the content taking up a whole viewport, reserving space for a header at the top and a footer at the bottom.

body {
  min-height: 100vh;
  margin: 0;
}

header {
  min-height: 50px;
  background: #f89427;
}

footer {
  min-height: 50px;
  background: #ec7272;
}

/**** Trick: ****/

body {
  display: flex;
  flex-direction: column;
}

/* The article fills all the space between the top and bottom elements in the body when flex set to 1 */
article {
  flex: 1;
}

Grid

Grid is similar to the flexbox method and is a straightforward approach with minimal CSS styles. We use grid and grid-template-rows properties to create a grid. Then the content uses 1fr unit for the leftover space in the grid container (the body element).

Since the header and footer have a defined height, a 1fr expands the content to fill the entire viewport. If the content is not longer than the viewport, this fr expansion forces a footer to stick to the bottom of a webpage. On the other hand, it will be at the bottom of the scrollable content if the document is longer than a viewport.

body {
  min-height: 100vh;
  margin: 0;
  display: grid;

  /**** Trick: ****/
  grid-template-rows: auto 1fr auto;
}

header {
  min-height: 50px;
  background: #f89427;
}

footer {
  min-height: 50px;
  background: #ec7272;
}

position:absolute (no dynamic height)

This method uses a ::after pseudo-element on a body, that is set to have the footer’s height. Using a ::after forces the pseudo-element to create space after the body which a footer will occupy. When the footer is positioned using absolute, it appears like the element is taking up the pseudo-element’s space and eliminates the adverse effects of its absolute positioning (For example, covering up a body’s content).

body {
  min-height: 100vh;
  margin: 0;
  position: relative;
}

header {
  min-height: 50px;
  background: #f89427;
}

footer {
  background: #ec7272;
}

/* Trick: */
body {
  position: relative;
}

/**** Trick: ****/

body::after {
  content: "";
  display: block;
  height: 50px; /* Same height as below */
}

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50px; /* Same height as body */
}

Table-layout

Another method is using display: table to turn a body into a table and setting a footer as a table-row. This method also ads min-height: 100% to the body resulting in a footer sticking to the page’s bottom.

header {
  min-height: 50px;
  background: #f89427;
}

footer {
  min-height: 50px;
  background: #ec7272;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

article {
  height: 1%;
}

/**** Trick: ****/

body {
  display: table;
  width: 100%;
}

body > footer {
  display: table-row;
}

Creating a Fixed Footer

Another popular method in creating footers is sticking them to the bottom of a viewport. We can make a fixed footer by utilizing the absolute positioning feature of CSS. This fixed element will hover over the content at the bottom of a page as the user scrolls. We will now review a standard solution.

position: fixed

The position method uses a position: fix to fix a footer to the bottom of a viewport while allowing the content to slide under it.

HTML

<div class="content">
  <p>Content Text</p>
  <br/>
</div>
<div class="bottom">I'm a fixed footer</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 100vh;
  color: #fff;
}

.content {
  background: #f4f4f4;
  padding: 2rem;
  width: 50%;
  margin: 0 auto;
  color: black;
}

button {
  padding: 1rem;
}

/**** Trick: ****/

.bottom {
  background: #ef476f;
  padding: 2rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}