Within the layout, there was a specific container that enclosed everything except for the footer. This container had a negative margin set to the exact height of the footer.
!-- begin snippet: js hide: false console: true babel: false -->
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Set to match footer height */
/* Taking into account possible margin-bottom of last child element as well */
margin-bottom: -50px;
}
.footer,
.push {
width:100%;
height:100px;
}
.footer{
background-color:yellow;}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="add">Add Data</button>
<div class="wrapper">
<div class="push">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem nec lectus fermentum volutpat sed at est. Phasellus ultrices eget mi in congue. Cras condimentum ligula ut metus tempus, eu ullamcorper massa convallis.</p>
<p>Sed non purus et justo pretium lobortis. Mauris euismod arcu ac ex tincidunt interdum. Curabitur placerat eleifend lacus, quis feugiat eros venenatis id. Duis id bibendum velit.</p>
<p>Vivamus rutrum rhoncus velit, vel posuere felis faucibus vel. Ut ornare euismod pellentesque. Nam ac enim fermentum, fermentum nisi vitae, venenatis orci.</p>
<p>Aliquam erat volutpat. Etiam molestie dictum libero a gravida. Donec consequat ante at odio dapibus varius. Fusce malesuada ipsum vel tortor iaculis laoreet.</p>
</div>
</div>
<footer class="footer"></footer>
</body>