我们在浏览网站的时候,可以看到一些网站页面的布局是头部固定,内容区域滚动的效果,那么这样的布局效果要怎样做呢?以前我们要实现页面头部固定布局是使用position:fixed,但是本文给大家分享一个更方便快捷的方法,就是使用flex布局,那么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布局的使用有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理