实现一个上中下布局，上下盒子高度固定、位置固定，中间元素自适应

面试题目：
实现一个上中下布局，上下元素高度固定，且固定在屏幕的顶部和底部，中间元素自适应填满剩余空间。
HTML代码

<div class="header">顶部</div>
<div class="middle">中间</div>
<div class="footer">底部</div>

CSS代码

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    .header {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100px;
        background: pink;
        line-height: 100px;
        text-align: center;
    }
    
    .middle {
        position: absolute;
        top: 100px;
        bottom: 100px;
        width: 100%;
        background: skyblue;
        text-align: center;
        overflow: auto;
    }
    
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        background: slateblue;
        line-height: 100px;
        text-align: center;
    }
</style>

渲染结果