zoukankan      html  css  js  c++  java
  • flex盒模型实现头部尾部固定

    近期做移动app、wap等站,需要头部固定在顶部,不随着内容滚动而滚动
    平时第一想法就是使用position:fixed;top:0;z-index:10;这样去实现
    但这样使用fixed之后,会在ios系统下,当有input输入框的时候.出现键盘遮盖的问题
    为了避免这种情况
    则使用flex盒子

    -----------------------------------
    <div class="wrapper flex flex-v">
    <div class="header">我是头部header</div>
    <div class="main flex-1">我是中间内容</div>
    <div class="footer">我是底部footer</div>
    </div>
    -----------------------------------
    聊聊几行主体结构,上中下布局.无需去写js,无需去应用框架.
    无需嵌套很多层结构,也无需很多样式.只需按照之前已经配好的去写俩css样式名即可完美呈现所需效果。
    详情demo见附件。
    小试牛刀。欢迎拍砖!

    下载链接:http://files.cnblogs.com/files/leshao/%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%AE%9E%E7%8E%B0%E5%A4%B4%E9%83%A8%E5%B0%BE%E9%83%A8%E5%9B%BA%E5%AE%9A.rar

    多谢@白树等大神的指点 

  • 相关阅读:
    e552. 取Applet的参数
    e551. 精简的Applet
    e558. 在Applet中多图片交互显示
    e1087. try/catch语句
    e1086. if/else语句
    e1087. 用For循环做数组的遍历
    e1084. 捕获错误和异常
    Zookeeper 应用程序
    Zookeeper API
    Java并发编程:volatile关键字解析
  • 原文地址:https://www.cnblogs.com/leshao/p/5627602.html
Copyright © 2011-2022 走看看