基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
来源:互联网 发布:nanosleep windows 编辑:程序博客网 时间:2024/05/21 17:34
之前写过一个小项目,首先这个页面布局是这个样子滴,举个栗子,京东的首页:
这算是一种还算常见的页面样式吧,头部和底部固定(或者底部固定没有头、头部固定没有底),有的会用fixed去做,但有在很多手机上会出现很多的奇葩的问题。
思前想后,后来我决定使用弹性布局去做,至少在手机浏览器中都是支持的,虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS,配合HTML5 history API还可以实现一个无刷新跳转,并且用户可点击前进后退和刷新页面。最近有遇到一个开发需求:单个H5页面,于是乎我干脆把之前写的小项目的CSS+HTML布局单拎出来,方便以后使用,其实实现方法很无聊很弱智:
首先是整个页面的骨架(HTML部分):
很简单,就是一个头(.header)、内容区(.content)、脚部(.footer),然后被一个.page包裹就实现了满屏,骨架超简单,在附上CSS实现:
就是上面一段CSS,就会被浏览器解析成这样:
头部和底部都是被子元素撑开的,并不用指定高度,,底部的button不管来几个也都是平均分布的,完全不用去计算一堆margin、padding以及position等等,弹性布局超赞有木有,当年的CSS2+HTML4时代要想实现这样的布局超麻烦有木有
然后再来个弹出层,一个简单的基于头尾固定的H5小页面就出来了:
使用table布局自动居中,并且这时使用fixed充满屏幕(百分比情况下fixed还算可靠),这样一个绿色的半透明背景并且自动居中的弹出层基本样式救出来了:
弹性布局大法好,应付一般的页面都不是问题,除非设计的脑子被僵尸吃了,硬要一些变态的需求以及狗shit一样的设计
阅读全文
0 0
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- 基于flex弹性布局头尾固定,中间滚动效果实现
- 纯CSS实现三列布局(两边固定,中间自适应)
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- css头尾固定中间高度自适应布局
- flex上下固定中间滚动布局
- Flex布局实现圣杯布局,左右两列固定、中间列自适应的三列式布局
- FLEX实现两侧边栏固定中间自适应布局
- android实现顶部底部标题栏固定 中间可滚动,仿QQ空间的主界面布局
- 用flex实现弹性布局
- 中间文字,两边横线(纯css实现的哦)
- css 一列固定一列自适应布局-flex布局实现
- css经典布局——头尾固定高度中间高度自适应布局
- css经典布局——头尾固定高度中间高度自适应布局
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- 如何让自己30岁之后更值钱
- 欢迎使用CSDN-markdown编辑器
- a伪标签
- Java获取月份第一天和最后一天日期
- 深入理解Java中的final关键字
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- 如何判断网上征婚信息的真实性
- hibernate多对多annotation的简单实用
- 如何debug caffe中的cu文件
- 新手配置Struts2.5之各种坑
- 《谷歌如何测试》 三、四、五、六
- RecyclerView的item不充满的整个宽度的原因二种
- 查看YII版本
- 启动amq时遇到java.net.URISyntaxException: Illegal character in hostname at index处理方法