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

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

需求

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

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

要求

1. 必须使用纯CSS

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

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

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

2. 不能使用Table布局

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

3. 不能写死元素的高度

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

解决方案

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

代码如下

我始终显示在屏幕顶部

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

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

我始终显示在屏幕底部

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

html自动平分宽度,HTML5使用纯CSS实现“按比例平分”整个垂直空间
HTML5使用纯CSS实现"按比例平分"整个垂直空间需求需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式. ...
苹果html5插件,纯CSS打造各种超逼真的苹果（Apple）设备模型
CSSDevices是一款使用纯CSS制作的各种超逼真的苹果(Apple)设备模型.这些CSS苹果设备模型中可以嵌入图片.文字.视频等HTML元素,并且非常容易的就可以制作出轮播图的效果. 使用方法 ...
css中图片在div中的位置,纯CSS实现任意图片在div中垂直居中
在苦逼的前端领域,相信许多CSS新手都遇到过图片垂直居中的问题,今天我们就来分享一种实现图片垂直居中的CSS方法. 话不多说,先直接贴上代码: div{ border:1px solid #ccc; ...
html5给div设置单边界,纯CSS实现border的0.5px设置
移动开发现在占据着越来越大的前端开发比例,所以对于移动端WEB页的要求也越来的越多,比如很多的H5页面,在设计出来时,看起来更像是一个原生的APP页面,而我这里想说的一个点就是,在H5页面中,关于分隔 ...
一个div 上下两行_纯CSS实现单一div的正多边形变换
纯粹利用CSS,让"单一个"div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计 ...
【html5】纯css实现圆圈中显示居中文字效果
为了实现qq邮箱app的邮件显示效果,就是哪个邮件左边的图案,当没有找到对应logo时,以主题头一个字作为logo 代码如下: <html> <head> <title& ...
html div 虚线边框样式,纯CSS实现渐变虚线框和边框滚动动画
渐变虚线边框如果对边框的样式细节不是很在意,我们可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透出渐变背景色,于是看上去像是渐变色. 以下是 ...
div 边框旋转，纯 css
div 边框旋转 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
html怎么做一条轴,html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果
1.概述 html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先 ...
纯CSS样式实现圆角边框
圆角应用的比较广泛,比如说一些说明的div,或者模块的div,圆角的button等. 公司的页面一般是用图片实现的,坑爹的是这次的图片整个边框的上面或整个都是一个图片,我现在要调整大小受到图片的限制了 ...

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

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

最新文章

热门文章