JSFiddle - React, Tailwind, and code Playground

by UnsungHero97

HTML

<div id="wrapper">
    <div id="header"><div id="header-content">Header</div></div>
    <div id="content">
        <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
        <div id="main">Main</div>
    </div>
    <div class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footer {
    height: 50px;
}
#footer-content {
    border: 1px solid magenta;
    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
}
.push {
    height: 50px;
    clear: both;
}

#header {
    height: 50px;
}
#header-content {
    border: 1px solid magenta;
    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
}
#content {
    height: 100%;
}
#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    height: 100%;
    float: left;
}