前端开发

 首页 > 前端开发 > css教程 > 使用Flex布局实现头部固定内容区域滚动的方法最新评论添加评论

使用Flex布局实现头部固定内容区域滚动的方法最新评论添加评论

分享到:
【字体:
导读:
         [导读] 使用Flex布局实现头部固定内容区域滚动的方法...

页面头部固定布局以前用 position:fixed实现,如今可以用flex布局实现,快捷方便。

Flex布局好处:1.不破坏html文档流 2.兼容性更好。

display: flex 和 display: -webkit-box 仅是各阶段命名,并没有区别。


page{
 display: -webkit-box; //设置弹性布局
 -webkit-box-orient: vertical; //设置子元素垂直布局
 height: 100%;
}
.header:{
  height: 50px; //设置头部高度( 位置固定)
}  
.content:{
  -webkit-box-flex: 1; //设置1等份占满全屏
 overflow: auto //设置溢出滚动
}

注:如若没有反应,把外层view去掉

分享到:
H5中取消a标签在点击时的背景颜色的方法...
1、取消a标签在移动端点击时的蓝色 a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; } 2、使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景 a,a:hover,a:active,a:visit...
CSS使用BEM命名规范实践最新评论添加评论
今天带来CSS使用BEM命名规范实践教程详解当你看到一个class的时候,你想得到什么信息? 这个class用在什么地方,作用是什么? 是否在其他地方也有使用该class,修改会不会引起其他地方的样式问题? class 是否在js中被使用? ...... 此时,你最想一眼看到这个class就解决以上所有的问题,而BEM你值得拥...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……