SOURCE

<section class="layout layout-div">
    <div class="top"></div>
    <div class="middle">
        <h1>div布局</h1>
        <h1>div布局</h1>
        <h1>div布局</h1>
        <h1>div布局</h1>
        <h1>div布局</h1>
    </div>
    <div class="bottom"></div>
</section>

<section class="layout layout-absolute">
    <div class="top"></div>
    <div class="middle">
        <h1>absolute布局</h1>
        <h1>absolute布局</h1>
        <h1>absolute布局</h1>
        <h1>absolute布局</h1>
        <h1>absolute布局</h1>
    </div>
    <div class="bottom"></div>
</section>

<section class="layout layout-flex">
    <div class="top"></div>
    <div class="middle">
        <h1>flex布局</h1>
        <h1>flex布局</h1>
        <h1>flex布局</h1>
        <h1>flex布局</h1>
        <h1>flex布局</h1>
    </div>
    <div class="bottom"></div>
</section>

<section class="layout layout-grid">
    <div class="top"></div>
    <div class="middle">
        <h1>grid布局</h1>
        <h1>grid布局</h1>
        <h1>grid布局</h1>
        <h1>grid布局</h1>
        <h1>grid布局</h1>
    </div>
    <div class="bottom"></div>
</section>

* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    display: flex;
    justify-content: space-between;
}
.layout {
    width: 24%;
}
.top {
    background: red;
}
.bottom {
    background: blue;
}
.middle {
    background: yellow;
}
.layout-div .top {
    height: 100px;
}
.layout-div .middle {
    height: calc(100% - 200px);
}
.layout-div .bottom {
    height: 100px;
}
.layout-absolute {
    position: relative;
}
.layout-absolute .top {
    position: absolute;
    top: 0;
    height: 100px;
    left: 0;
    right: 0;
}
.layout-absolute .middle {
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
}
.layout-absolute .bottom {
    position: absolute;
    bottom: 0;
    height: 100px;
    left: 0;
    right: 0;
}
.layout-table {
    display: table;
}
.layout-table .top {
    display: table-row;
    height: 100px;
}
.layout-table .bottom {
    display: table-row;
    height: 100px;
}
.layout-flex {
    display: flex;
    flex-direction: column;
}
.layout-flex .top {
    height: 100px;
}
.layout-flex .middle {
    flex: 1;
}
.layout-flex .bottom {
    height: 100px;
}
.layout-grid {
    display: grid;
    grid-template-rows: 100px auto 100px;
}