JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id=wrapper>
        <header>top</header>
        <div id="maincontent">middle stuff<br>
				middle stuff<br>
				middle stuff<br>
				middle stuff<br>
				middle stuff<br>
				middle stuff<br>
				middle stuff<br>
				middle stuff<br>middle stuff<br>
				middle stuff<br>
				middle stuff<br>middle stuff<br>
				middle stuff<br>
				middle stuff<br>
				middle stuff<br>
				middle stuff<br>
				middle stuff<br></div>
        <footer>test</footer>
    </div>
</body>

CSS

html {
    overflow-y: scroll;
    height: 100%;
    margin: 0px auto;
    padding: 0;
}

body {
    height: 100%;
    margin: 0px auto;
    max-width: 960px;
    min-width: 750px;
    padding: 0;
}
header {
    height: 40px;
    width: 100%;
    background-color: blue;
}
div#maincontent {
    background-color: green;
    padding-bottom: 60px;
    overflow: auto;
    height: 100%;
}
footer {
    height: 40px;
    background-color: grey;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
div#wrapper {

    height: 100%;
    position: relative;
    overflow: hidden;
}