Making a sticky footer is perhaps the most widely recognized web improvement assignment you can undoubtedly settle with flexbox. Without a sticky footer, if you need more substance on the page, the footer “bounces” up to the center of the screen, which can demolish the client experience. Before flexbox, designers utilized negative edges to drive the footer down to the lower part of the page. Fortunately, we don’t need such a hack any longer!
In this article, Web Developer Dubai will show you a simple strategy that permits you to make a sticky footer with a flexbox. All that’s needed is a couple of lines of code a few minutes to execute it.
-
Start with the HTML
In our HTML document, we make a heading, two passages with some lorem ipsum text, and a footer so we can without much of a stretch test the sticky footer usefulness. Open your code proofreader, make another organizer (or venture, contingent upon the code manager), and avoid the index.html document within it. Then, at that point, add the accompanying code:
-
Add some basic styles in CSS
To make our demo work, we should begin our CSS record for certain straightforward resets and essential styles. Notwithstanding, note that these essential styles are simply proposals and you can utilize some other styles rather than them — they are not needed for the sticky footer usefulness.
-
Style the footer
Presently, we add some CSS styles to the footer too, nonetheless, note that this is as yet not the sticky footer usefulness. You can change these fundamental footer styles to some other plan you like.
-
Make the footer sticky with a flexbox
Presently how about we see the CSS code that we need to use to make a sticky footer with flexbox. Truth be told, it is only five CSS rules. You can utilize this procedure with any sort of footer in any program that upholds flexbox. Flexbox support is very acceptable at this point; as of now all programs being used help it all around the world, and it’ll improve with time.
Here is the code you need to add to your style.css record. Preferably, you should add this scrap before the overall footer styles
We have additionally utilized the flex and flex-recoil properties. The flex property is a shorthand property that can remain with an alternate number of qualities. At the point when it has just one worth, it represents flex-develop that characterizes the allotment of additional room on the screen (if there is any). Along these lines, the flex: 1; decide implies that the fundamental substance (.content) ought to get all the additional room on the screen.
To adjust this impact, we additionally utilize the flex-recoil property on the footer with a worth of 0. This property characterizes what happens when there isn’t adequate room on the screen. On the off chance that its worth is 0, it implies that this component shouldn’t recoil whatever occurs. Along these lines, we don’t need to be worried about the possibility that the footer will by one way or another vanish on the screen.
Take a Look at the demo
Presently, if you investigate the demo, you will see that the program has added the perfect measure of void area to the lower part of the substance and the footer pleasantly adheres to the lower part of the page:
You can explore different avenues regarding adding more substance to the page also. You will see that when there isn’t any additional room on the screen and the page becomes scrollable, the footer simply acts as a normal footer. It will not adhere to the lower part of the page yet look all over with the remainder of the substance.
Subsequent stages
Flexbox is an extraordinary format module to carry out basic and complex designs and functionalities the same. It’s a smart thought to make a sticky footer regardless of whether you don’t figure you may require it, as certain clients may utilize a colossal screen on which the page can without much of a stretch run out of substance. With flexbox, it’s truly only a couple lines of additional code and requires just a negligible exertion.
Get in touch with Freelance Web Developer Dubai today to get your sticky footer.
