CSS样式：采用三排式布局设计，默认设置为顶部与底部高度固定不变，并在屏幕中心位置自动撑出并超出滚动区域

界面布局说明

整体采用上中下三段式结构，顶部与底部区域固定在屏幕的上方和下方，中间内容区域根据剩余空间自动扩展填充。上下区域的高度具有不确定性。整体交互方式类似于常规手机应用程序的界面设计。中间可滚动区域需具备超出屏幕范围的滚动功能。

如图所示

这种表面普通且广泛采用的布局形式。当顶部与底部的高度无法确定时，极易忽视中间区域实现自适应高度并支持滚动的处理方式。

关键技术要点
1、针对三行布局中中间部分自适应高度的问题，采用flex布局方式进行处理
2、为使中间区域能够扩展并实现滚动效果，运用脱离文档流的策略，确保在扩展高度的同时不会影响到页脚区域的显示

以下为对应的html代码块

    <div class="container">
        <header>header</header>
        <div class="content-wrap">
            <content>
                <p style="font-size: 100px;">这里有很多内容</p>