SOURCE

<div class="layout">
    <section class="demo1">
        <header class="h50 red">方法-：calc</header>
        <main>
            <div class="blue h500">main</div>
        </main>
        <footer class="h50 black">footer</footer>
    </section>
    <section class="demo2">
        <header class="h50 red">方法二：absolute</header>
        <main>
            <div class="blue h500">main</div>
        </main>
        <footer class="h50 black">footer</footer>
    </section>
    <section class="demo3">
        <header class="h50 red">方法三：flex</header>
        <main>
            <div class="blue h500">main</div>
        </main>
        <footer class="h50 black">footer</footer>
    </section>
    <section class="demo4">
        <header class="h50 red">方法四：grid</header>
        <main>
            <div class="blue h500">main</div>
        </main>
        <footer class="h50 black">footer</footer>
    </section>
</div>

html, body, .layout{
    height: 100%;
}
body{
    margin: 0;
}
.layout{
    display: flex;
    justify-content: space-around;
    text-align: center;
    color: #fff;
}
main{
    overflow-y: auto;
}
section{
    width: 20%;
    margin: 20px 0;
}
.h50{
    height: 50px;
    line-height: 50px;
}
.h500{
    height: 500px;
}
.red{
    background-color: red;
}
.black{
    background-color: black;
}
.blue{
    background-color: blue;
}
.demo1 main{
    height: calc(100% - 100px);
}
.demo2{
    position: relative;
}
.demo2 header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.demo2 footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.demo2 main{
     height: 100%;
     padding: 50px 0;
     box-sizing: border-box;
}
.demo3{
    display: flex;
    flex-direction: column;
}
.demo3 main{
    flex: 1;
}
.demo4 {
    display: grid;
    grid-template-rows: 50px 1fr 50px;
}