zoukankan      html  css  js  c++  java
  • 移动端弹性效果

    布局一: 定义页面整体高度为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{100%;}

    .header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}

    .header{position: absolute;top:0;left:0;100%;}

    .footer{position: absolute;bottom:0;left:0;100%;}

    .main{

            position:absolute;

            z-index:1;

            top:40px;

            left:0;

            bottom:40px;

            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;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;100%;}

     

    那么剩下的主要问题是子容器高度超出父容器高度,子容器内容如何弹性滚动。

    .css{
    overflow:auto;/* winphone8和android4+ */
    -webkit-overflow-scrolling: touch; /* ios5+ */
    }

     

  • 相关阅读:
    一些话
    把视频文件拆成图片保存在沙盒中
    相册视频保存进沙盒
    数据库
    C 计算数组长度
    iOS之与JS交互通信
    iOS之duplicate symbols for architecture x86_64错误
    iOS之隐藏状态栏
    iOS之开发程序之间的跳转及跳转到appStore
    iOS之常用的判NULL的方法
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/5650606.html
Copyright © 2011-2022 走看看