In this article, we are going to show how we can force the Divi footer area to load at the bottom of the page. We have generally seen that the footer loads at the bottom of the page having a large amount of content but in case if we are having very less amount of content then the footer will load exactly below the content. In this case, we have the two solutions, please read below for more.
First Method: We can simply add few of the “Enter” just below the content and this will make the footer to load at the bottom of the page.
Second Method: We can also use the code for loading footer at the bottom. Follow the simple steps for implementing this method using code.
- Go to WordPress dashboard>> Divi >> Theme options >> Intergration >> Add code in “Add code to the <head> of your blog” field as shown in the below image.
Then add the below code to this field –
|
1 2 3 4 5 6 |
<script type="text/javascript"> jQuery(document).ready(function(){ var maincontent_height = jQuery("#main-content").height(); var window_height = jQuery(window).height(); if(maincontent_height < window_height){ jQuery('#main-footer').css({"position":"fixed","bottom":"0px" , "width":"100%"}); jQuery('body').css({"overflow":"hidden"}); } }); </script> |
Now we can see that after adding the above code, footer loads at the bottom of the page, as shown in the below image.
Hope this piece of work helps you, please comment below for any other help.
Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes
You have Successfully Subscribed!