SIMPLE CSS STICKY FOOTER CODE

To balance out this effect, we also use the flex-shrink property on the footer with the value of 0. content) should get all the extra space on the screen. So, the flex: 1 rule means that the main content (. When it has only one value, it stands for flex-grow that defines the allocation of extra space on the screen (if there is any).

The flex property is a shorthand property that can stand with a different number of values. We have also made use of the flex and flex-shrink properties. The min-height: 100vh rule makes use of the vh viewport unit and ensures that the body element spans across the entire height of the viewport. content at the top and at the bottom of the screen. As a result, the entire tag works as a flexible column - with.

In the code above, we created a column-based flex layout with the help of the display: flex and flex-direction: column rules.

Ideally, you should add this snippet before the general footer styles (added in the previous step): Here is the code you need to add to your style.css file. Flexbox support is pretty good by now currently 97.93% of all browsers in use support it globally, and it’ll get even better with time. You can use this technique with any kind of footer in any browser that supports flexbox. Now let’s see the CSS code that we need to use to create a sticky footer with flexbox. We will push it down in the next step with the help of flexbox. If you check out the demo now, it will look like the below image:Īs you can see, the footer is displayed in the middle of the screen due to the lack of sufficient content.

However, note that these basic styles are just recommendations and you can use any other styles instead of them - they are not required for the sticky footer functionality.Ĭreate a style.css file in the same folder where your index.html file is found. To make our demo work, let’s start our CSS file with some simple resets and basic styles. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.ĭuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SIMPLE CSS STICKY FOOTER CODE

Simple css sticky footer