If you work with DIVI and want to keep your footer always at the bottom also on short pages, meaning to avoid a footer floating somewhere up in the air, but you don’t want a fixed footer that is always visible, then you just found a possibility to do so. Of course this solution can be used on any website, but since I am working mostly in DIVI and aim to reach my perfect vision of design with it, I publish all the customizations I figure out in time – both as my own archive to look them up easily, as well as for other DIVI users to save the time of adapting the solutions found on the internet to the DIVI markup. So here it is, with the limitation of a known footer height set in px or em, which for the moment is enough for me. Once I get to dynamic footer content I need to investigate further.
1 2 3 |
html, body {height: 100%} #page-container {position: relative; min-height:100%; height: auto !important; height: 100%; padding-bottom: 54px;} #main-footer {position: absolute; bottom: 0; width: 100%; height:54px;} |
Thank you! Exactly what i needed.
Great! Thanks a lot for this fix!
It just works.
Awesome and so simple. Thank you.
I tried using the ElegantThemes recommended way and the main content kept getting covered up. Your’s is better, thank you.