JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    
    <div id="header">
        <div id="header-content" class="maxwidth">
            Header (this is fixed)
        </div>
    </div>
    
    <div id="sub">
        <div id="sub-content" class="maxwidth">
            Sub-header
        </div>
    </div>
    
    <div id="content" class="maxwidth">
        
        <div id="main">
            Main<br />
            Main<br />
            Main<br />
            Main<br />
            Main<br />
            Main<br />
            Main<br />
        </div>
        
        
        
    </div>
    
    <div class="push"></div>
    
</div>

<div id="footer">
    <div id="footer-content" class="maxwidth">
        Footer
    </div>
    <div id="sidebar">
            Sidebar<br/>Sidebar<br/>Sidebar<br/>
    </div>
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
}

.maxwidth { max-width: 1000px; margin: 0 auto; }

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

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

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

#content {
    position: relative; /* maybe */
    height: 100%;
}
#sidebar {
    position:absolute;
    top:48px;
    border: 1px solid skyblue;
    width: 100px;
    position: absolute;
    right: 0;
    bottom: 0px;
}
#main {
    
}