JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div id="maincontent">Dynamic Content</div>
    <div id="footer">StaticContent</div>
</div>

CSS

.wrapper {
    position: relative;
    padding-bottom: 50px;
}

#maincontent {
    height: 700px;
    background: seagreen;
}

#footer{
    height: 50px;
    background: lightblue;
    position:fixed;
    bottom:0;
}


@media all and (max-height:300px) {
  #footer {
    background: red;
    position: absolute;
  }
}