<div class="wrapper">
    <div class="main">
        <div class="header">
            <div>Код блока HEADER</div>
        </div>
        <div class="article">
            <p>Код блока article </p>
        </div>
    </div>
    <div class="footer">
        <div>Код блока FOOTER</div>
    </div>
</div>

:root, body {padding: 0; margin: 0; overflow: hidden;}
:root {font-size: 20px;}
.wrapper {position: relative; width: 100vw; height: 100vh; display: flex; flex-flow: column nowrap;}
.main {position: relative; flex: 1; display: flex; flex-flow: column nowrap; height: calc(100vh - 3rem);}
.header {flex: none; height: 2rem; background: #ddd;}
.footer {flex: none; height: 3rem; background: #eee;}
.article {flex: 1 1 auto; overflow-y: scroll;}
.article p {height: 200vh;}