Making a sticky footer is one of the foremost common web improvement assignments you’ll effortlessly fathom with flexbox. Without a sticky footer, on the off chance that you don’t have sufficient substance on the page, the footer “jumps” up to the center of the screen, which can totally destroy the client involvement. Some time recently flexbox, engineers utilized negative edges to drive the footer down to the foot of the page. Fortunately, we don’t require such a hack any longer!
In this article, we are going appear you a simple strategy that permits you to make a sticky footer with flexbox. It takes fair many lines of code and some of minutes to execute it.
1. START WITH THE HTML
In our HTML record, we make a heading, two sections with a few lorem ipsum content, and a footer so that able to effectively test the sticky footer usefulness. Open your code editor, make a modern organizer (or venture, depending on the code editor) and an purge index.html record interior of it. At that point, include the taking after code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer with Flexbox</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</footer>
</body>
</html>2.ADD SOME STYLES IN CSS
Now, we add a few CSS styles to the footer as well, in any case, note that typically still not the sticky footer usefulness. You’ll be able alter these fundamental footer styles to any other plan you like.
Include the taking after code to your stlye.css record, underneath the past CSS piece:
/* Basic footer styles */
footer {
width: 100%;
background: #111;
margin-top: 1.5rem;
}
ul {
padding: 1.25rem;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
margin: 0.25rem 0.75rem;
}
ul a {
color: #fff;
text-decoration: none;
}
ul a:hover {
text-decoration: underline;
}4. MAKE THE FOOTER STICKY WITH FLEXBOX
Presently let’s see the CSS code that we have to be utilize to make a sticky footer with flexbox. In reality, it is fair five CSS rules. You’ll be able utilize this method with any kind of footer in any browser that supports flexbox. Flexbox support is lovely great by presently; as of now 97.93% of all browsers in utilize back it all inclusive, and it’ll get indeed way better with time.
Here is the code you wish to include to your style.css record. In a perfect world, you ought to include this piece before the common footer styles (included within the past step):
/* Sticky Footer */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
footer {
flex-shrink: 0;
}Within the code over, we made a column-based flex format with the assistance of the display: flex; and flex-direction: column; rules. As a result, the complete tag works as a adaptable column — with .substance at the best andat the foot of the screen.
The min-height: 100vh; run the show makes utilize of the vh viewport unit and guarantees that the body component ranges over the whole tallness of the viewport.
We have moreover made utilize of the flex and flex-shrink properties. The flex property could be a shorthand property that can stand with a distinctive number of values. When it has as it were one esteem, it stands for flex-grow that characterizes the allotment of extra space on the screen (in case there’s any). So, the flex: 1; run the show implies that the most substance (.substance) ought to get all the additional space on the screen.
To adjust out this impact, we moreover utilize the flex-shrink property on the footer with the esteem of 0. This property characterizes what happens when there’s not sufficient space on the screen. On the off chance that its esteem is 0, it implies that this component shouldn’t shrivel anything happens. In this way, we don’t have to be be perplexed that the footer will some way or another vanish (or shrivel) on the screen.
GRAB THE ENTIRE CSS FILE
Here is how your whole style.css ought to see like, with the sticky footer rules blended into the rest of the code:
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
}
body {
font-size: 1rem;
/* Sticky footer */
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
padding: 1.5rem;
/* Sticky footer */
flex: 1;
}
/* Basic footer styles */
footer {
width: 100%;
background: #111;
margin-top: 1.5rem;
/* Sticky footer */
flex-shrink: 0;
}
h1,
p {
margin: 1rem 0;
}
ul {
padding: 1.25rem;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
margin: 0.25rem 0.75rem;
}
ul a {
color: #fff;
text-decoration: none;
}
ul a:hover {
text-decoration: underline;
}NEXT STEPS
Flexbox may be a extraordinary format module to actualize straightforward and complex formats and functionalities alike. It’s a great thought to form a sticky footer indeed on the off chance that you don’t think you might require it, as a few clients might utilize a gigantic screen on which the page can easily run out of substance. With flexbox, it’s truly fair a couple of lines of additional code and takes as it were a negligible exertion.
