JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="page-wrapper">
  <button>make it longer</button>
  <div class="longer">content goes here</div>
  <footer>
    this is a footer
  </footer>
</div>

CSS

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.page-wrapper {
  min-height: 100%;
  position: relative;
}

footer {
  background-color: #f0f;
  position: absolute;
  bottom: 0;
  width: 100%
}

.longer {
  height: 50px;
  background-color: #ddd;
}

JavaScript

$('button').click(function() {
	$('.page-wrapper').append('<div class="longer"><div class="longer"><div class="longer">')
})