How to Create Sticky Footer with CSS

In this CSS article we want to learn How to Create Sticky Footer with CSS, creating sticky footer using CSS is useful way to ensure that your website footer remains at the bottom of the page, even when there is not enough content to fill the screen. in this article we want to talk that how to create sticky footer with CSS for your website.

How to Create Sticky Footer with CSS

First step in creating sticky footer is to add the HTML markup to your website footer. footer should be contained within separate HTML element such as div and positioned at the bottom of the page.

<footer>
  <p>Copyright © 2020-2023 Geekscoders. All Rights Reserved</p>
</footer>

</footer>

After that we want to use CSS to style the footer and make it sticky. you can use this CSS code for that.

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 20px;
}

footer {

position: fixed;

bottom: 0;

width: 100%;

background-color: #f5f5f5;

padding: 20px;

}

So now let me talk about this code

position: fixed; sets the footer’s position to be fixed on the screen.

bottom: 0; ensures that the footer remains at the bottom of the page.
width: 100%; sets the width of the footer to be the full width of the screen.
background-color: #f5f5f5; sets the background color of the footer to be flight gray.

padding: 20px; adds padding to the top and bottom of the footer to give it some space.

When footer is positioned with position: fixed; it can overlap the content area of the website. to fix this issue we need to adjust the content area margin so that it does not overlap with the footer.

body {
  margin: 0;
  padding: 0;
  height: 100%;
}
main {
  margin-bottom: 80px; /* Adjust this value to match the height of your footer */
}

body {

margin: 0;

padding: 0;

height: 100%;

}

main {

margin-bottom: 80px; /* Adjust this value to match the height of your footer */

}

So now let me talk about this code

body sets the margin and padding to 0 to remove any default spacing.

height: 100%; sets the height of the body to be the full height of the screen.
main sets the margin-bottom to match the height of the footer, which in this example is 80px.

This is the complete code with HTML, save this file in .html and run it in the browser

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Footer</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    main {
      min-height: calc(100% - 80px); /* Adjust this value to match the height of your footer */
    }
    footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #f5f5f5;
      padding: 20px;
    }
  </style>
</head>
<body>
  <main>
    <h1>Sticky Footer Example</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis ex et nunc scelerisque, vel volutpat velit venenatis. Fusce finibus mi quis odio sagittis, eget pulvinar nibh aliquet.</p>
  </main>
  <footer>
    <p>Copyright © 2020-2023 Geekscoders. All Rights Reserved</p>
  </footer>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Sticky Footer</title>

<style>

body {

margin: 0;

padding: 0;

height: 100%;

}

main {

min-height: calc(100% - 80px); /* Adjust this value to match the height of your footer */

}

footer {

position: fixed;

bottom: 0;

width: 100%;

background-color: #f5f5f5;

padding: 20px;

}

</style>

</head>

<body>

<main>

<h1>Sticky Footer Example</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis ex et nunc scelerisque, vel volutpat velit venenatis. Fusce finibus mi quis odio sagittis, eget pulvinar nibh aliquet.</p>

</main>

</footer>

</body>

</html>

This will be the result

Learn More on CSS

How to Create CSS Slideshow

How to Create Sticky Footer with CSS

Learn More on CSS

Leave a Comment Cancel reply