At Get Digital, we specialize in web development services, including creating stunning and functional websites. We will lead you through the process of making a sticky footer with Flexbox in this thorough step-by-step guide. A sticky footer is one that remains at the bottom of the page even when the content does not occupy the whole viewport. This strategy guarantees that your website has a consistent and professional layout, which improves the user experience. So, let’s dive in and explore how to create a sticky footer with Flexbox!
Start with the HTML:
To begin, start a new HTML file in your favorite text editor. Setting up the HTML structure is the first step in making a sticky footer. In this example, we’ll utilize a straightforward structure with a header, main content section, and footer. Here’s an example of a possible HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>Your Website Title</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<header>
<!– Your header content goes here –>
</header>
<main>
<!– Your main content goes here –>
</main>
<footer>
<!– Your footer content goes here –>
</footer>
</body>
</html>
Feel free to customize the header, main content, and footer sections according to your website’s design and requirements.
Add some basic styles in CSS:
With the HTML framework in place, let’s add some basic styling to the sticky footer effect using CSS. Make a new file named “styles.css” and connect it to your HTML file with the link> element in the head> section. Here is an example of a CSS style you may use:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
margin-top: auto;
background-color: #f2f2f2;
padding: 20px;
}
In the above CSS code, we start by targeting the body element and setting its display property to flex. By using Flexbox, we gain powerful layout capabilities. Additionally, we set the flex-direction property to a column to ensure that the elements inside the body stack vertically.
We utilize the min-height: 100vh attribute on the body to ensure that the footer stays at the bottom of the page even when the content heights fluctuate. This forces the body element’s minimum height to be at least the entire height of the viewport.
Next, we target the main element and set flex: 1. This allows the main content area to grow and fill the remaining vertical space, pushing the footer to the bottom.
Finally, we apply styling to the footer element. When we set the margin-top attribute to auto, the footer is pushed to the bottom of the page. The background-color parameter specifies the color of the footer’s backdrop, while the padding property provides some space around the footer text.
STYLE THE FOOTER
HTML Structure:
Create the HTML framework for our sticky footer first. A footer often includes pertinent details about a website or application, like copyright notices, contact details, and connections. We’ll keep things straightforward for this example:
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
<!– Your other head elements (stylesheets, meta tags, etc.) –>
</head>
<body>
<!– Your page content goes here –>
<!– The footer –>
<footer>
<div class=”footer-content”>
<!– Footer content here –>
</div>
</footer>
</body>
</html>
body {
/* Ensure that the content doesn’t overlap with the footer */
margin-bottom: 60px; /* Adjust this value according to your footer’s height */
}
footer {
/* Set the position of the footer */
position: absolute;
bottom: 0;
width: 100%;
}
body {
/* Ensure that the content doesn’t overlap with the footer */
margin-bottom: 60px; /* Adjust this value according to your footer’s height */
}
footer {
/* Set the position of the footer */
position: absolute;
bottom: 0;
width: 100%;
}
Adding Content to the Footer:
Next, let’s add some content to the footer, such as copyright information and social media icons.
<footer>
<div class=”footer-content”>
<p>© 2023 Your Website. All rights reserved.</p>
<div class=”social-icons”>
<!– Add your social media icons here –>
</div>
</div>
</footer>
Styling the Footer Content:
Now, let’s style the footer’s content. Customize the font, colors, and alignment to match your website’s design.
.footer-content {
/* Set the text alignment and padding */
text-align: center;
padding: 15px;
}
.footer-content p {
/* Customize the font and color for the copyright text */
font-family: Arial, sans-serif;
color: #888;
font-size 14px;
}
.social-icons {
/* Style your social media icons accordingly */
/* Example: display them horizontally */
display: flex;
justify-content: center;
align-items: center;
}
.social-icons img {
/* Adjust icon size and spacing */
width: 30px;
margin: 0 5px;
}
Background and Text Color:
Make the footer’s background and text colors fit the theme of your website.
footer {
/* Customize the background and text color for the footer */
background-color: #333;
color: #fff;
}
Adjusting Spacing and Margins:
Lastly, adjust the spacing and margins to ensure the footer looks visually appealing.
.footer-content {
/* Add some spacing between the text and social icons */
margin-bottom: 10px;
}
.social-icons {
/* Add spacing between the icons */
margin-top: 10px;
}
MAKE THE FOOTER STICKY WITH FLEXBOX
Understanding Flexbox:
Flexbox is a layout model that allows items within a container to be dynamically arranged, creating flexible and responsive designs. With Flexbox, we can easily create sticky footers without relying on complicated positioning.
Enabling Flexbox:
To use Flexbox, we need to set the display property of the footer container to flex.
footer {
/* Enable Flexbox for the footer container */
display: flex;
flex-direction: column; /* To stack the items vertically */
}
Flex Container and Flex Items:
The container is referred to in Flexbox as the “flex container,” and the contents are called the “flex items.” By default, the elements will spread out to fill the container’s whole width.
Making the Footer Sticky:
Now comes the magic part of making the footer sticky using Flexbox.
body {
/* Set a minimum height to the body to ensure the footer stays at the bottom */
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
/* Set flex-shrink to 0 to prevent the footer from shrinking */
flex-shrink: 0;
}
By setting min-height: 100vh on the body and making the footer not shrink (flex-shrink: 0), The bottom footer will remain there in the viewport even when the content inside the body is shorter than the screen height.
Congratulations! You’ve successfully created a sticky footer with Flexbox. This method ensures that the footer remains at the bottom of the page, even when the content is not enough to fill the entire screen. Flexbox provides an elegant and straightforward solution for creating modern and responsive layouts.
Feel free to further customize the styles, add more content, or integrate this technique into your existing projects to improve the user experience and visual appeal of your websites. Happy coding!
