Block height to full screen?

Question

css

Hello.
The task is this. The maximum screen height is 100%. those. The scrollbar should not appear in any case. There is a fixed height header and footer. They are located respectively at the top and bottom of the screen. You need to add a block between them so that its height completely occupies the free space between the header and footer, regardless of the content. All this needs to be done without using js.

Answer 1

<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;
}

Answer 2

flexwill help)

Answer 3

I dare to suggest that it is worth trying to set this as a percentage.
Let's say header and footer are 20 percent each and 60 percent is the container you need.
Like this?