JSFiddle - React, Tailwind, and code Playground

HTML

<button id="add">Add content</button>
<div class="wrap">
    <p>some text</p>
</div>
<div class="footer">
    Sticky Footer
</div>

CSS

*{margin:0;}

body, html, .wrap{
  height:100%;
}

body > .wrap{
  height:auto;
  min-height:100%;
}

.wrap:after {
  content: "";
  display: block;
  height: 100px; 
}

.wrap p{
  margin: 20px 0;
}

.footer{
  background:#662e8c;
  margin-top:-100px;
  height:100px;
  color:#fff;
  position:relative;
  line-height:180%;
  padding:0 10px;
}

JavaScript

$("#add").on("click", function() {
  $("<p>some text</p>").appendTo(".wrap");
});