Fixed variable height footer

Fixed variable height footer in GeneratePress

/* Vanilla JS Script add footer height as padding to bottom of content */

<script type="text/javascript">
window.onload = function() {
  var footerHeight = document.getElementsByClassName('site-footer')[0].clientHeight;
  var contentBox = document.getElementsByClassName('site-content');
  contentBox[0].style.marginBottom = footerHeight+"px";
}
</script>

/* Fix site footer */
<style>
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
</style>