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.

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.

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

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;
}
Other Examples
Here is a collection of CSS footer examples from across the web. Included are examples and code for reuse on your website.
Related

Pure CSS Classy Footer
About Project
Links

Simple Fixed Footer
About Project
Links

Simple Slide-Out Footer
About Project
Links

Simple Responsive Fixed Footer
About Project
Links

Animated Mobile Footer Menu
About Project
Links

Social Media Footer
About Project
Links

Footer With Conent Scale
About Project
Links

Parallax Fixed Footer
About Project
Links

Flexbox Sticky Footer Example
About Project
Links

Footer with CSS Grid
About Project
Links

Animated Footer Toggle
About Project
Links

Footer Always at the Bottom – Flexbox
About Project
Links

Bubble-Type CSS Goey Footer
About Project
Links

Footer Design With Embossed Effect
About Project
Links

CSS “Always on the Bottom” Footer
About Project
Links

Bootstrap Footer 6(Source From Bootstrap)
About Project
Links

Bootstrap Footer 5 (Source From Bootstrap)
About Project
Links

Bootstrap Footer 4 (Source From Bootstrap)
About Project
Links

Bootstrap Footer 2 (Source From Bootsnipp)
About Project
Links

Footer With Company Logo
About Project
Links

Footer Template With Category
About Project
Links

Template Contact & Footer
About Project
Links

Footer Using Bootstrap 4(Source From Bootsnip)
About Project
Links

Bootstrap Footer With Company Logo 2
About Project
Links

Responsive Flexbox Footer
About Project
Links

Bootstrap 4 Footer With Social Icons
About Project
Links

Stylish Footer With Animation
About Project
Links

Just Another Simple Footer
About Project
Links

Footer Responsive
About Project
Links

Responsive & Clean Footer Design
About Project
Links

Attractive Responsive Footer
About Project
Links

3 Blocks Responsive Footer
About Project
Links
Recommended Articles
- 32 CSS Carousel Examples and Code
- 15 Flexbox CSS Examples and Code
- 32 CSS Page Transition Examples and Code