<div id="wrap">
<header></header>
<main></main>
<footer></footer>
</div>html, body {margin: 0}
#wrap {
border: 2px solid #000;
display: flex;
flex-flow: column nowrap;
width: 100vw;
height: 100vh;
}
header {
flex: 0 0 100px;
background: green;
}
footer {
flex: 0 0 150px;
background: blue;
}
main {
flex: 1 1 auto;
background: yellow;
}
Средний
