CSS Candy

Patterns

CSS Sticky Footer

Creating a Sticky Footer

CSS sticky footer ensures footers stay at page bottom using min-height.

Introduction to Sticky Footers

Sticky footers are a useful design pattern in web development that ensures the footer section of a webpage remains at the bottom of the viewport when the content is short. This technique prevents the footer from floating midway up the page, providing a cleaner and more professional layout.

Understanding the Concept

The sticky footer pattern makes use of CSS properties like flexbox and min-height. By setting the min-height of the body or main container to cover the full viewport height, the footer naturally sticks to the bottom. This is achieved by ensuring the layout takes up at least the full height of the screen.

Basic Structure of a Sticky Footer

To create a sticky footer, you typically structure your HTML using a header, a main content area, and a footer. Here is a simple structure:

Implementing the CSS for a Sticky Footer

To make the footer stick to the bottom, we use CSS flexbox properties. Here is a basic CSS setup:

Explanation of the CSS

  • html, body: Setting height: 100%; ensures that the body covers the full height of the viewport.
  • .wrapper: The min-height: 100vh; ensures the wrapper div takes the full viewport height. Using display: flex; and flex-direction: column; arranges child elements vertically.
  • main: The flex: 1; property allows the main content to expand, pushing the footer to the bottom when content is short.
  • footer: Basic styling to ensure it is distinct and centered.

Testing Your Sticky Footer

To test the sticky footer, adjust the amount of content within the main section. With minimal content, the footer should remain at the bottom of the viewport, while with more content, it should naturally move down as the page height increases.

Conclusion

Using the sticky footer pattern improves your site's layout and ensures a consistent look across different pages regardless of the content length. By leveraging CSS flexbox and min-height properties, you can create responsive and user-friendly web designs.

Patterns

Next
Card Layout