根据手机屏幕不同高度,显示不同高度的弹窗

最近项目要做一个根据手机不同高度从而显示不同高度的弹窗,研究了一小会,正好本人小白最近才开始关注博客,记录一下

需求

UI给的设计稿要求顶部和底部是要求固定的,中间的话由于老机型比如5s和屏幕小的安卓是无法显示全的,所以要做到中间的内容可以滚动;

布局

这里我把遮罩层和提示放在一个元素里,所以最外层的importTc的css为

.importTc{
position: fixed;
width:100%;
height:100%;
z-index:101;
background: rgba(49,49,49,0.8);
padding:30px 15px;
display: flex;
align-items: center;
justify-content: center;
max-width:750px;//因为兼容移动端和PC,所以给一个最大的宽度导致页面太宽变形;
}

这里要做到弹窗居中,开始我想到了绝对定位position:absolute;但是否决了这个想法,
由于高度不确定,所以无法做到垂直居中,于是用到了灵活布局,利用

<