Maybe you have heard before about the term “sticky footer” without knowing what it actually means. In web design sticky footer is footer that sticks to the bottom of the page regardless of amount of content you have on your page. You have maybe already encountered yourself with the situation where you created a page in DIVI where you need to set amount of content that actually doesn’t fill up the whole browser height and you end with “floating” footer somewhere in the middle of the page like this:

sticky-footer

If you have encountered this problem, and wasn’t sure how to solve it, we are going to teach you simple and efficient pure CSS solution for this using CSS calc function. 

USING CALC FUNCTION TO CREATE STICKY FOOTER STEPS:

The example of calc function for this page from the screenshot above would look like this and I will explain you every value:

#main-content{min-height:calc(100vh - 133px);}

First of all, we have targeted the #main content wrapper ID that is build in into DIVI. This is the div that wraps all the content inside page or post. The values I have set will work on default DIVI installation, but I will show you how I got to these values and how you can use them on any DIVI page. Here we are setting few things in the function to understand:

  1. min-height CSS property which determines the minimal height of div or element we are applying it to.
  2. we are using calc() function to make us calculation using 2 values inside
  3. 100vh – we are saying function to use the 100% height of actual viewport of the device which visitor is approaching your site from. If we used only this value footer would now be out of the screen and we would have too much space, because the #main-content element would have itself the 100% height according to a viewport of the device and not including the footer. What we need to do now is to reduce an amount of pixels we have in header and footer from the 100% of viewport height to actually have the footer down bellow “sticked” to the bottom if there is not enough content to this happen “naturally”.
  4. 133px you see above is the value that is the sum of header height and footer height. If you don’t know pixel amount of this values you can use the inspect element or developer tools to check the value of this 2 elements. You need to sum the #main-header height and #main-footer height. We are now deducting 133px from 100% height of device viewport. So the short formula for this would be

DEVICE VIEWPORT (100VH) – (#main-header height + #main-footer height)

NOTE:

If you done this properly and you still have a footer a little more down that it should be that may be due to the height of admin bar if you are logged in. In this case just test your site in indigo mode or in another browser where you aren’t logged in.

I hope this was helpful to you. If you have any question related to article feel free to post a comment bellow.

Share This