How to Create Sticky Footer with CSS

A common layout technique, commonly called a sticky footer, was challenging to do in the past with older CSS but is now how to Create Sticky Footer with CSS. A sticky footer is a footer that remains fixed and visible at the bottom of the screen no matter how far the user scrolls down the page. In theory, the position of the sticky footer should never change and should always appear on the user’s screen.

Creating a sticky footer using CSS is actually quite simple, mostly just setting the footer’s position property to fixed. Take a look at the code below to see how it is done. In this example, the ID of the footer is #sticky-footer.

How to Create Sticky Footer with CSS

A sticky footer is the footer of the web-page, which sticks to the bottom of the viewport when the content is shorter than the viewport height. This allows us to navigate a website easily and can be created with CSS.

Create HTML

• elements with the following class names: “content” and “push”.
• Add a element with the class name “footer”.

Add CSS

• Specify the height and margin properties for the and elements.
• Add the padding, min-height, and margin properties to the “content” classs.
• Set the height property equal to the negative margin.

What is a sticky footer?

A footer is the information at the bottom of a web page. On a traditional website, visitors would scroll down to see the information in the footer at the bottom of the web page. But with a sticky footer (also called a fixed footer), that information always appears at the bottom of the visitor’s web browser, even if the visitor scrolls down. You don’t have to go to the bottom of the page to see it.

For example, the reservation counter team found that prominently displaying the contact center phone number on the website increased orders, so they made sure it was displayed in a sticky footer for mobile visitors.

The image below is from the article “Conversion Rate Optimization Case Study: How a Travel Site Doubled Its Website Conversion Rate in One Year,” which points out where phone numbers are listed on mobile sites. The phone number at the bottom of the page is listed in the sticky footer.

FAQ

What is sticky footer CSS?

A sticky footer pattern is one where the footer of your page “sticks” to the bottom of the viewport in cases where the content is shorter than the viewport height.

How do I make the footer touch the bottom of the page in CSS?

You can use flexbox to ensure that the footer is always at the bottom of the page. This is done by setting the giving the body element min-height: 100vh , display: flex and flex-direction: column.

Is Sticky footer same as fixed footer?

On a traditional website, a visitor would scroll down to see the information at the bottom of a webpage in the footer. However, with a sticky footer (sometimes known as a fixed footer) that information is always present at the bottom of the visitor’s web browser as the visitor scrolls down.