JSFiddle - React, Tailwind, and code Playground

HTML

<header id="head"></header>
<div id="over">

    <nav id="side-nav"></nav>

    <div id="content"></div>

</div>
<footer id="main-foot"></footer>

CSS

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: white;
}

#over {
    height: 100%;
    min-height: calc(100% - 150px);
}

#head {
    height: 100px;
    width: 100%;
        background-color: #D1C5C5;
}

#side-nav {
    float: left;
    height: 100%;
    width: 250px;
    background-color: #AFAFC9;
}

#content {
    float: left;
    height: 100%;
    width: calc(100% - 250px);
    background-color: #AFC9B0;
}

#main-foot {
    clear: both;
    width: 100%;
    height: 50px;
}