Adding a Sticky Footer to Genesis Theme with Flexbox

A sticky footer refers to a web page footer that sticks to the foot of the page even when there is not a lot of content on the page, without one the footer will ride up leaving the layout somewhat unsightly.

Need a sticky footer here

Need a sticky footer here

 

There are various methods to add a sticky footer, some javascript and others CSS, you can add a sticky footer to a Genesis layout with some simple flexbox rules.

/* Sticky Footer */

.site-container {
 display: -ms-flexbox;
 display:-webkit-flex;
 display:-webkit-box;
 display:flex;
 -ms-flex-direction:column;
 -webkit-flex-direction:column;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 flex-direction:column;
 min-height:100vh;
}

.site-inner {
 -ms-flex:1;
 -webkit-flex:1;
 -webkit-box-flex:1;
 flex:1;
 width: 100%;
 padding: 20px 0;
 word-wrap: break-word;
}

This will push down the footer to the bottom of the viewport.

genesis-flex-box-sticky-footer-in-place

As long as the Genesis theme follows the default structure this CSS will work – so the site-container is the parent of site-inner and site-footer which are adjacent sibling elements as in the layout below.

genesis-layout-structure

Check with caniuse to add the most up to date required vendor prefixes. Flexbox is certainly the way to go in the future.

 

IE 10 & 11

*An issue arose in that this fails in IE10 & 11 and the container collapses – so the container needs to display as block in these browser versions – which you can target with…

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 
 .site-container { display: block; } /* IE10 & IE11 */

}

 

Safari

*Another issue arose with some older Safari versions, these are harder to target, you could inject a class via javascript…

Then apply CSS

Ref