直接上代码！

效果视频

这是我在制作记账软件demo的时候遇到的问题，现阶段手机屏幕长度不一，有全面屏手机（如iphoneX）也有许多非全面屏（如iphone8）所以在制作应用时需要一个屏幕适配方案来适配现在的复杂场景，所以我就想到了利用flex布局来实现该功能。

该功能的精髓是在中间的div框中设置style样式为flex:1使得当页面高度拉长时，中间的div内容会优先撑开。