How To Get The Footer At The Bottom Html

—

by

Vector Linux
in

Getting the footer at the bottom of a webpage can be a common challenge for web developers, but with some knowledge and a little bit of CSS, it can be easily achieved. In this article, I will guide you through the steps to get the footer positioned at the bottom of an HTML page.

Understanding the Structure

Before we dive into the CSS code, it’s important to understand the structure of an HTML page. In a typical webpage layout, we have a header, a main content area, and a footer. To get the footer at the bottom, we need to make sure that the main content area expands to fill the available height of the viewport.

The CSS Code

To achieve this, we can use CSS Flexbox or CSS Grid. Let’s start with the Flexbox approach:

html {
    height: 100%;
}

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

.main-content {
    flex: 1;
}

In this code snippet, we set the height of the html element to 100% and the body element to use flexbox and have a column direction. This allows the .main-content section to expand and fill the remaining space in the viewport, pushing the footer to the bottom.

Adding the Footer

Now that we have the main content area expanding to fill the available space, let’s add the footer:

footer {
    background-color: #f5f5f5;
    padding: 20px;
    margin-top: auto;
}

In this code snippet, we style the footer element with a background color, padding, and use margin-top: auto; to push it to the bottom of the container. The margin-top: auto; property, combined with the flexbox layout, ensures that the footer sticks to the bottom of the page even if the content is shorter.

Conclusion

Getting the footer at the bottom of an HTML page can be achieved by using CSS Flexbox or CSS Grid. By setting the height of the html element to 100% and using flexbox to create a column layout with the main content area expanding to fill the available space, we can easily position the footer at the bottom. Additionally, styling the footer with a background color and using margin-top: auto; ensures that it sticks to the bottom even when the content is shorter.

Now that you have a solid understanding of how to get the footer at the bottom of an HTML page, go ahead and try it out on your own projects. Happy coding!