JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="banner"></div>
    <div>
        <div id="whoami" class="corpus"></div>
        <div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content.  I can't pass the footer in absolute position</div>
    </div>
    <div id="footer"></div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    background:#fff;
    height:100%;
}
#wrap {
    background-color:#ff0;
    min-height:100%;
    width:1000px;
    left:50%;
    margin-left:-500px;
    position:absolute;
}
#banner {
    background-color:blue;
    height:150px;
    width:1000px;
    position:relative;
}
.corpus {
    width:800px;
    min-height:100%;
    margin-left:100px;
    background-color:grey;
    position:relative;
    height:auto;
    margin-top:5px;
}
#footer {
    height:100px;
    width:1000px;
    background-color:purple;
    position:absolute;
    z-index:1;
    bottom:0;
    margin-top:5px;
}