JSFiddle - React, Tailwind, and code Playground

HTML

<header>header</header>
<nav>nav</nav>
<div>
    <header>sub header</header>
    <div>
        <section>section 1</section>
        <section>section 2</section>
        <section>section 3</section>
    </div>
    <footer>sub footer</footer>
</div>

CSS

/** -- normalize -- */
* { margin: 0; padding: 0; border: 0 none; }
html, body { font-family: arial, sans-serif; font-size: 90%; }


/** -- layout -- */
html, body {
    height: 100%;
}

header {
    height: 20%;
}

nav {
    float: left;
    width: 30%;
    height: 80%;
}

body > div {
    margin-left: 30%;
    width: 70%;
    height: 80%;
}

div div {
    overflow-y: auto;
    height: 80%;
}

div header, /** ! overrides 'header' */
div footer {
    height: 10%;
}


/** -- demo: simulate content -- */
div section {
    height: 100%;
}


/** -- demo: background-colors -- */
header { background-color: #eee; }
nav { background-color: #ddd }
div header { background-color: #ccc; }
div div { background-color: #bbb; }
div footer { background-color: #aaa; }