几种方法实现上下固定中间自适应布局

HTML:

<div class="top-center-bottom">
        <div class="top">top</div>
        <div class="center">
                视口单位(Viewport units)<br>
                什么是视口？<br> 
                在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。<br>
                视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。<br>
                    根据CSS3规范，视口单位主要包括以下4个：<br>
                        1.vw：1vw等于视口宽度的1%。<br>
                        2.vh：1vh等于视口高度的1%。<br>
                        3.vmin：选取vw和vh中最小的那个。<br>
                        4.vmax：选取vw和vh中最大的那个。<br>
                    vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。<br>
                比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。<br>
                vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。<br>
                vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。<br>
                <br><br><br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nam facilis consequatur dicta, quae tempora qui. Sequi consequuntur labore fugit, dolor, nihil illo perferendis quae ipsum sunt odio, blanditiis a.l<br>
                结束.
        </div>
        <div class="bottom">bottom</div>
    </div>

1.fixed

/* 1.fixed */
        .top-center-bottom .top{
            position: fixed;
            top:0;
            height:50px;
            width:100%;
            background:red;
        }

        .top-center-bottom .bottom{
            position: fixed;
            bottom:0;
            height:50px;
            width:100%;
            background:red;
        }

        .top-center-bottom .center{
            margin: 50px 0;
            width:100%;
            height:calc(100% - 100px);
            overflow:scroll;
            background-color:#F0E6A2;
        }

2.absolute

/* 2.绝对定位 */
        .top-center-bottom .top{
            position:absolute;
            top:0;
            background-color:#05C020;
            height:50px;
            width:100%;
            z-index:100;
        }
        .top-center-bottom .bottom{
            position:absolute;
            bottom:0;
            background-color:#88D6E9;
            height:50px;
            width:100%;
            z-index:100;
        }
        .top-center-bottom .center{
            position:absolute;
            width:100%;
            top:50px;
            bottom:50px;
            height:calc(100% - 100px);
            overflow:scroll;
            background-color:#F0E6A2;
            z-index:90
        }

3.flex

/* 3.flex */
        .top-center-bottom{
            display:flex;
            flex-direction:column;
            width:100%;
            height:100%;
        }
        .top-center-bottom .top{
            height:50px;
            background:red;
        }
        .top-center-bottom .bottom{
            height:50px;
            background:red;
        }
        .top-center-bottom .center{
            flex:1;
            background:green;
            overflow:scroll;
        }

4.grid

/* 4.grid */
        .top-center-bottom{
            display:grid;
            grid-template-rows:50px calc(100vh - 100px) 50px;
            grid-template-columns:100%
        }
        .top-center-bottom .top{
            background:red;
        }
        .top-center-bottom .bottom{
            background:red;
        }
        .top-center-bottom .center{
            background:green;
            overflow: scroll;
        }

5.table

注意，由于display: table-row即相当于tr，tr的高度由内部的元素决定，这里我们可以在tr里再嵌套一层给定高度为calc(100vh - 100px)的div，或者向下面这样，索性让中间部分display:block。

/* 5.table */
        .top-center-bottom{
            display:table;
        }
        .top-center-bottom .top{
            display: table-row;
            height: 50px;
            background: red;
        }
        .top-center-bottom .bottom{
            display: table-row;
            height: 50px;
            background: red;
        }
        .top-center-bottom .center{
            display: block;
            height: calc(100vh - 100px);
            background: green;
            overflow: scroll;
        }