html页面div等分,HTML5使用纯CSS实现“按比例平分”整个垂直空间

目录

HTML5使用纯CSS实现“按比例平分”整个垂直空间

需求

需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式。

可惜上面网址给出的是固定高度的解决方案.不符合要求.

要求

1. 必须使用纯CSS

假如使用JS根据布局动态计算的话,也是可以的.

通过获取头部和底部的布局高度,再用屏幕高度减去即可得到中部的高度即可.

中部固定高度=屏幕高度 - 头部高度 - 底部高度

2. 不能使用Table布局

因为在UNI-APP项目中,暂不考虑使用HTML别的特定元素来实现布局

3. 不能写死元素的高度

方便适配不同的手机屏幕高度,假如写死高度,则兼容性不佳.

解决方案

最终方案: display: flex + position:fixed; + overflow: auto;

代码如下

我始终显示在屏幕顶部

1. 我是长长的内容；需要支持滚动；占剩余空间的比例为1份

1. 我是长长的内容；需要支持滚动；占剩余空间的比例为5份

我始终显示在屏幕底部