CSS force Divi Footer to be Sticky to bottom of screen

Add the following CSS to the Theme Options Custom CSS. Note that the heights you choose in the calc function will depend on the height of your top menus and footer menus. Basically you are forcing the main content to always be the height of the view port less the sum of the menu and footer height.

The resultant behaviour is that the footer will remain stuck to the bottom of the viewport when the content is less than the full viewport, but will move downwards to below the bottom of the screen as the content gets to be bigger than the size of the viewport. ie Displaying sticky behaviour.


body{
	display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 981px) {
#main-content{
	flex:1;
	min-height: calc(100vh - 162px);
	
}
}

@media only screen and (max-width: 980px) {
#main-content {
	flex:1;
	min-height: calc(100vh - 220px);
	
}
}

@media only screen and (max-width: 572px) {
#main-content {
	flex:1;
	min-height: calc(100vh - 280px);
	
}
	
}