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.

 

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.

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.

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