JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-top">
    Fixo no topo
</div>

<div class="content">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum, nunc vitae viverra cursus, lorem ligula commodo ipsum, a iaculis est ex id mi. Curabitur gravida mattis lorem nec pharetra. Curabitur vestibulum ex vitae ex placerat laoreet. Nullam interdum congue nisl et varius. Mauris nulla sem, auctor vitae nibh sit amet, varius finibus tellus. Phasellus at tempor eros. Sed placerat velit sed condimentum tristique. Donec magna ante, condimentum a turpis eget, tempor mollis lorem. Praesent nunc sapien, lobortis ut tortor sit amet, vehicula aliquam nunc. Sed non bibendum lectus. Nullam ut libero maximus, mollis magna sit amet, placerat enim. Sed eget euismod orci. In consequat posuere urna, id convallis nunc vehicula ornare. Praesent id sapien aliquet, pulvinar ex quis, consequat lectus. Phasellus at ante quis justo euismod aliquet.
    </p>
</div>

<div class="nav-bottom">
    Fixo no rodapé
</div>

CSS

* {
    /* remove estilo padrão do navegador */
    padding: 0;
    margin: 0;
}

.nav-top, .nav-bottom, .content {
    /* considera o padding e a borda como parte da altura e largura */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.nav-top {
    position: absolute;
    height: 30px;
    width: 100%;
    top: 0;
    background-color: #ccc;
}

.nav-bottom {
    position: absolute;
    height: 30px;
    width: 100%;
    bottom: 0;
    background-color: #ccc;
}

.content {
    position: absolute;
    /* adiciona o scroll quando necessário */
    overflow: auto;
    width: 100%;
    /* altura da .nav-top */
    top: 30px;
    /* altura da .nav-bottom */
    bottom: 30px;
}