页面头部固定布局以前用 position:fixed实现,如今可以用flex布局实现,快捷方便。
Flex布局好处:1.不破坏html文档流 2.兼容性更好。
display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。
<view> <view class="header"></view> <view class="content"></view> </view>
page{ display: -webkit-box; //设置弹性布局 -webkit-box-orient: vertical; //设置子元素垂直布局 height: 100%; } .header:{ height: 50px; //设置头部高度( 位置固定) } .content:{ -webkit-box-flex: 1; //设置1等份占满全屏 overflow: auto //设置溢出滚动 }
注:如若没有反应,把外层view去掉
到此这篇关于使用Flex布局实现头部固定内容区域滚动的方法的文章就介绍到这了,更多相关Flex头部固定内容区域滚动 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
首字放大练习_尊托云数_www.jb51.net 脚 本之家 www.jb51.net。 [Ctrl+A 全选 注...
前言 演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的...
CSS纵向导航菜单通常是指放置在网页左侧或右侧的从上至下排列的一种导航形式。纵...
序 本文主要研究一下ddd-by-examples的DomainEvent DomainEvent public interfac...
CSS 实现 图片鼠标悬停折叠效果 1. 实现要点 折叠是由多个块级元素来完成的; 图...
使用DW制作网页时候,网页的框架往往在某些方面有固定的格式,像是导航栏、banne...
熟练地管理网站文件,能让我们的网站井然有序,修改升级等会十分方便。 软件名称...
尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类 div class=”News...
近期在学习有关响应式设计的内容,对此做了些整理,部分图片来源于网络。 1、为...
Dreamweaver是软件的三剑客之一,这个软件强大到可以让一点都不懂编码的人员写出...