移动端弹性效果
2016-07-07 16:27
357 查看
布局一: 定义页面整体高度为100%,然后使用 position:absolute 布局可解决
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
html,body{height:100%;}
.wrap{width:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.header{position: absolute;top:0;left:0;width:100%;}
.footer{position: absolute;bottom:0;left:0;width:100%;}
.main{
position:absolute;
z-index:1;
top:40px;
left:0;
bottom:40px;
width:100%;
}
布局二: 定义页面整体高度为100%,然后使用 display:flex 布局可解决
那么剩下的主要问题是子容器高度超出父容器高度,子容器内容如何弹性滚动。
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
html,body{height:100%;}
.wrap{width:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.header{position: absolute;top:0;left:0;width:100%;}
.footer{position: absolute;bottom:0;left:0;width:100%;}
.main{
position:absolute;
z-index:1;
top:40px;
left:0;
bottom:40px;
width:100%;
}
布局二: 定义页面整体高度为100%,然后使用 display:flex 布局可解决
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
html,body{height:100%;}
.wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.main{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;}
那么剩下的主要问题是子容器高度超出父容器高度,子容器内容如何弹性滚动。
.css{
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
}
相关文章推荐
- Android 简单的手势处理+监听的处理,用GestureDetector
- android之shape做图片
- Android 性能分析工具dumpsys的使用
- 关于 Android 进程保活,你所需要知道的一切
- 学习笔记之Block
- Swift - 区间运算符(... 和 ..<)
- webView加载html格式的字符串
- 安卓开发 局域网UDP获取服务器Ip地址
- 正确使用Android性能分析工具——TraceView
- iOS开发导航栏常用属性
- android 淘宝天猫支付宝浏览器打开本地app传递参数打开应用内页
- Android Studio、Git 解决合并冲突
- Android L SurfaceFlinger dump信息全解(一)
- 批量修改|导入Unity3d资源属性,帮助那些遗忘勾、选项的美术同学们 (其实我做美术的时候也一样有健忘症)
- AndroidStudio混淆
- iOS 观察者设计模式
- iOS学习(十三)Objective-C 常见的内存错误
- android线性加速度传感器数据存储到手机的sd卡中
- 【Android基础知识】TimePicker和DatePicker
- Android三种播放视频的方式