How To Make Css Footer Stay At Bottom

—

by

Vector Linux
in

Have you ever created a website and noticed that the footer doesn’t stay at the bottom of the page consistently? It can be frustrating when the footer floats in the middle of the content or doesn’t stick to the bottom when there isn’t enough content on the page. In this article, I will guide you through the process of making a CSS footer stay at the bottom of the page, ensuring a clean and professional design.

Understanding the Problem

Before we dive into solving the issue, let’s understand why the CSS footer tends to misbehave. By default, when you create a web page, the content within the body element is displayed vertically from top to bottom. The footer is just another element within the body, so it will naturally appear after the content.

The challenge arises when the content doesn’t fill the entire height of the browser window. In such cases, the footer will be positioned right after the content, leaving a whitespace gap at the bottom. This behavior is not desirable as it can make your website look incomplete or unprofessional.

Using CSS Flexbox

One way to overcome this issue is by using CSS Flexbox. Flexbox is a powerful layout system that allows you to create flexible and responsive designs. By utilizing the flex properties, we can ensure that the footer stays at the bottom of the page.

First, let’s create a basic HTML structure for our webpage:


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

Now let’s add some CSS to make use of Flexbox:


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

main {
  flex: 1;
}

Let’s break down the CSS code:

  • The display: flex; property on the body element enables flexbox layout for the entire page.
  • The flex-direction: column; property sets the main axis of the flex container to be vertical, stacking the elements from top to bottom.
  • The min-height: 100vh; property ensures that the flex container takes up at least the full height of the viewport. This prevents the footer from floating too high.
  • The flex: 1; property on the main element allows it to grow and occupy the remaining vertical space within the flex container. This pushes the footer to the very bottom.

Congratulations! With just a few lines of CSS, you have successfully made the footer stay at the bottom of the page using Flexbox.

Conclusion

Designing a website involves paying attention to even the smallest details, and making the footer stay at the bottom is one such detail that can significantly enhance the user experience. By utilizing CSS Flexbox and applying the techniques outlined in this article, you can achieve a consistent and professional look for your website.

Remember, it’s important to test your website across different browsers and devices to ensure that the footer stays at the bottom consistently. Happy coding!