JSFiddle - React, Tailwind, and code Playground

by Harisankaran Parameswaran

HTML

<div id="top"></div>
<div id="content">Why this div is not 100% height? I need this to fill all the way to the start of the footer if content is to little. If content extends beyond the blue footer, it should push the footer down.
</div>
<div id="anchored-footer"></div>

CSS

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative;
    min-height: 100%; /* to fill screen 100% even with less content */
    height: 100%; /* to allocate only 100% height */
}
#top {
    height: 50px;
    background-color: red;
    top: 0;
}
#anchored-footer {
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green;
    background-color: yellow;
    min-height: calc(100% - 110px); /* allocate the remaining width except the header + footer + borders */
    height: auto;
}