目录
HTML5使用纯CSS实现“按比例平分”整个垂直空间
需求
需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式。
可惜上面网址给出的是固定高度的解决方案.不符合要求.
要求
1. 必须使用纯CSS
假如使用JS根据布局动态计算的话,也是可以的.
通过获取头部和底部的布局高度,再用屏幕高度减去即可得到中部的高度即可.
中部固定高度=屏幕高度 - 头部高度 - 底部高度
2. 不能使用Table布局
因为在UNI-APP项目中,暂不考虑使用HTML别的特定元素来实现布局
3. 不能写死元素的高度
方便适配不同的手机屏幕高度,假如写死高度,则兼容性不佳.
解决方案
最终方案: display: flex + position:fixed; + overflow: auto;
代码如下
我始终显示在屏幕顶部我是长长的内容；需要支持滚动；占剩余空间的比例为1份我是长长的内容；需要支持滚动；占剩余空间的比例为5份我始终显示在屏幕底部
