JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="content">
   lots of random stuff<br />
   lots of random stuff<br />
   lots of random stuff<br />
  </div>
 <footer id="foot"><p></p></footer>

CSS

footer {
bottom: 0;
height: 10%;
min-height: 75px;
left: 0;
position: absolute;
width: 100%;
text-align: center;
background: #CAA400;
vertical-align: middle;
color: #232323;
}

JavaScript

var top = $('#content').height();
if(top > $(window).height()) {
$('#foot').css('top', top+'px');
}