Creating a sticky footer with CSS: A step-by-step guide

Struggling to keep my footer at the bottom of the page, I attempted this code:

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

Unfortunately, my footer ended up looking messy. My website runs on WordPress, and ideally, I'd like to avoid using any plugins for this issue. I'm searching for a pure CSS solution.

Below is the CSS script for my footer:

footer #bottom-footer{
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
border-top: 5px solid #F80000;
text-align: left;
padding: 9px;
font-size: 13px;
}
.footer-wrap a{
color:#000000;
}
...
.sidebar .tagcloud a{
background: #23A38F;
color: #FFF;
}

Access the website here.

csssticky-footer

Answer №1

By following a step-by-step approach outlined in an outdated online resource (now unavailable due to a dead link), you can streamline your code for optimal performance on your webpage. It is crucial to note that using #bottom-footer instead of footer #bottom-footer is recommended when selecting your footer to avoid potential issues. Here is the essential code snippet you may need:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* ensure space for footer */
}
#bottom-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Answer №2

Utilizing the power of flex box CSS, along with a structured HTML layout:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

Technique 1: (fixed height footer) Applying display:flex and flex-direction:column to the body. Adding flex:1 (flex-grow:1) to the main element.

The main section will expand vertically to fill any available space, ensuring the footer stays at the bottom.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

header {
  background-color: #cffac7;
  height:50px;
}

main {
  background-color: #f8e2ff;
  flex:1;
}

footer {
  background-color: #fceec7;
  height:50px;
}
<header></header>
<main></main>
<footer></footer>

Technique 2: (fixed height footer) Using display:flex and flex-direction:column on the body. Applying margin-top:auto to the footer.

By utilizing auto margins in flex containers, the footer automatically sticks to the bottom by absorbing free space. This doesn't require the main section to have content or a specific height. In this scenario, no flex rules are set for main, defaulting to flex:initial (flex: 0 1 auto).

body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      margin:0;
    }

    header {
      background-color: #cffac7;
      height:50px;
    }

    main {
      background-color: #f8e2ff;
      
    }

    footer {
      background-color: #fceec7;
      height:50px;
      margin-top:auto;
    }
<header></header>
<main></main>
<footer></footer>

Technique 3: (fluid height footer) Similar to technique #1 but with elements having no inherent height. By adjusting the flex-grow values of main, header, and footer, main expands much faster than the others.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

header {
  background-color: #cffac7;
  flex:1;
}

main {
  background-color: #f8e2ff;
  flex:5;
}

footer {
  background-color: #fceec7;
  flex:1 
}
<header></header>
<main></main>
<footer></footer>

Answer №3

This code snippet works perfectly, following the example from W3SCHOOLS.

Click here to view the example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Example of a Fixed/Sticky Footer</h2>
<p>This footer stays at the bottom of the page.</p>

<div class="footer">
  <p>Footer Content Goes Here</p>
</div>

</body>
</html>

Answer №5

A Working Solution for 2019 Using CSS Grid

If you've found yourself here, chances are you've experienced the same struggles I have :)

I'm sharing a solution that is guaranteed to work. It's the exact setup I use for my own website located at:

You can test its effectiveness regardless of content volume by visiting a fictional URL under my domain:

https://i.sstatic.net/Awlp0.png

Keeping everything simple and reusable, below is all the code necessary for a basic layout featuring a fixed top navigation/navbar, main content area, and sticky footer.

I suggest running it in full-page mode to see it in action:

https://i.sstatic.net/Ib5Xf.png

body {
    display: grid;
    /* Adjust 80 based on your footer height or use auto for variable-height footers */
    grid-template-rows: 1fr 80px;
    /* These two rules are crucial */
    min-height: 100vh;
    position: relative;
}

#topnav {
    background-color: black;
    color: white;
    /* Recommended styling by Google, tweak as needed */
    min-height: 64px;
    position: fixed;
    right: 100%;
    top: 0;
    width: 100%;
    /* Ensures it always appears above everything else */
    z-index: 100;
    left: 0;
}

#page-content {
    grid-row: 1;
    /* Read more about this property here: https://css-tricks.com/preventing-a-grid-blowout/ */
    min-width: 0;
    /* Customize based on your requirements */
    padding-bottom: 64px;
    padding-top: 64px;
}

#page-footer {
    background: black;
    bottom: 0;
    color: white;
    display: flex;
    grid-row: 2;
    height: 80px;
    position: absolute;
    width: 100%;
}
<body>
    <header>
        <nav id="topnav">topnav content goes here</nav>
    </header>
    <main id="page-content">
        <h1>Your page content here</h1>
    </main>
    <footer id="page-footer" class="container">
        <div>Created by Your Name</div>
    </footer>
</body>

Answer №6

I stumbled upon the solution right here

Modern Clean CSS “Sticky Footer”

html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Deleting images based on their class through a loop

Currently, I am in the process of constructing a carousel using data retrieved from an endpoint. The challenge I face is determining the appropriate image size to request from the server. To address this, I perform some front-end processing to dynamically ...

javascriptjquerycssimagehttp

JS Code for Optimal Viewing on Mobile Devices

I'm struggling with creating 3 image columns in 2 columns on mobile. It seems like there is a JS issue related to the minslide:3 and maxslide:3 conditions... When viewed on mobile, it's displaying 3 slides instead of 2. How can I adjust it to sh ...

javascriptjqueryhtmlcssjquery-mobile

Conceal Element without Eliminating from the Design

Need a solution: I have specific icons to display for certain elements, but not all. However, when hiding the icon, I want the spacing of the element to stay consistent. Is there a method to conceal an image within an element while preserving its allocat ...

htmlcss

"Bring Your Chart to Life: Give Those Bars a Left-to-

I am looking to add animation to a bar chart, with the bars animating from left to right. Currently, they all animate simultaneously. Is there a way to achieve this effect? $(function() { $("#bars li .bar").each(function() { var percentage = $( ...

javascripthtmljquerycssanimation

Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

I attempted to enable responsive font sizes in Bootstrap 4.3.1 by setting the $enable-responsive-font-sizes variable to true, but I did not see any changes. Below is the code from my template.html file: <div class="m-2" id="role" ...

cssangularbootstrap-4responsive

Styling images with unique shapes using CSS

I'm attempting to design a unique shape using only CSS so that it resembles the following: image of custom image shape I've been experimenting with CSS3 Mask, but unfortunately the support isn't broad enough as I need it to work in IE 10, Fi ...

htmlcsssvgsass

.display() and .conceal() functions malfunctioning

I'm in the process of creating a calendar system using the Codeigniter framework. My goal is to display a specific div every time a day cell in the calendar template is clicked. These divs are generated through a PHP for loop and populated from the d ...

jqueryhtmlcsscodeigniter

The magic of CSS Pseudo-classes in Inline Styling

For the longest time, I've been under the impression that you cannot include in-line :hover{..} styles to an element. However, recently I stumbled upon this page which showcased examples like this. <a href="http://www.w3.org/" s ...

htmlcss

What steps can I follow to ensure that the Twitter Bootstrap Collapsable Navbar is automatically open when the page

When the browser window is less than 980px wide and one visits Twitter Bootstrap's GitHub page, the navigation options are collapsed. To expand the options such as "Home", "Get Started", "Scaffolding," etc., simply click the button in the upper-right ...

jquerycsstwitter-bootstrapmedia-queries

Tips on replacing a React component's styling with emotion CSS

Is there a way to incorporate the background-color:green style to the <Test/> component in the following example without directly modifying the <Test/> component? /** @jsx jsx */ import { css, jsx } from "@emotion/core"; import React from "r ...

cssreactjsemotion

Implementing CSS to effectively scale images within a fixed box size

I am attempting to create a collection of images with rounded borders that will expand on hover, while staying within a specified box size. I want the effect to give the illusion that the image is only zooming inside the box and not physically enlarging on ...

htmlcss

Is there a way to temporarily toggle classes with jQuery?

Incorporating ZeroClipboard, I have implemented the following code to alter the text and class of my 'copy to clipboard button' by modifying the innerHTML. Upon clicking, this triggers a smooth class transition animation. client.on( "complete", ...

javascriptjquerycsszeroclipboard

The width property in Bootstrap is not functioning properly in .NET Core 6

I've exhausted all my options, including documentation and the last 10 stack overflow answers, but nothing seems to be working. I even tried using: <meta name="viewport" content="width=device-width, initial-scale=1"> I attem ...

htmlcssasp.net.netmodel-view-controller

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

javascripthtmlcss

Struggling with implementing a grid layout using CSS

I am currently facing an issue with my code where I am attempting to set up a wrapper element as a grid. However, upon inspecting the page, I am receiving notifications that my inputs for display, grid-template-columns, and grid-template-area are considere ...

csscss-grid

Organize the search bar and button over a background image using Bootstrap and CSS styling

I am facing a challenge in positioning the search bar on a background image, as well as placing a button at the bottom and center of the image. After that, I plan to include containers. My Goal https://i.sstatic.net/ZfYQj.png However, I am struggling an ...

htmlcsstwitter-bootstrapbootstrap-4responsive

Ensure that Bootstrap4 cards are fully stretched to a width of 100%

Does anyone know how to make Card2 and Card3 in Bootstrap4 stretch to 100% width? Card1 defines the total height, but Card2 and Card3 are not taking up the full remaining width. Card1 is already stretched, but Card2 and Card3 are inside a flex column and a ...

htmlcsstwitter-bootstrap

ArcGIS Online failing to display custom-styled tables with CSS styling

While using ArcGIS Online's browser map, I attempted to add HTML and CSS code to various plotted points to display a stylized table in a dialog box or small window upon clicking a point. Initially, the table appeared and functioned correctly. However, ...

htmlcssarcgis

What are some more efficient methods for implementing page location detection with Angular directives?

My website currently features a navigation bar with 4 anchor links that direct users to different sections of the page. As you scroll down the page, the corresponding link on the nav bar lights up to signify your position on the site. Experience it yourse ...

javascriptjqueryhtmlcssangularjs

Display Text Aligned in the Middle Beside Website's Logo

Newbie to HTML and CSS here! I'm attempting to achieve a design similar to this: https://i.sstatic.net/HyiP3.jpg Below is my code snippet: <div id="topbar"> <div class="image"> <img src="images/ghwlogo.png"> </ ...

htmlcss