zoukankan      html  css  js  c++  java
  • 浮动页头页脚,内容自适应高度(手机端常见)

    第一次写博客,只展示自己的小发现,至于兼容性和泛用性以后再考虑吧。

    对新技术本人的态度一向都是大胆接受,然后从中找些乐子,在暧昧不清之间终究会将其抛弃。

    对 flex 等布局方式的喜爱也许也只是短暂的,不过技术发展,总有些可以一起好好玩耍的时光的。

    基础的已经玩过了,来玩点实用的,比如这个:

    手机版页面总有个页眉页脚,放些logo和按钮菜单什么的,一般我们会选用定位的方式,ok,it's ok

    <div id="main">
        <header></header>
        <main></main>
        <footer></footer>
    </div>
    header, main, footer {
        position: absolute;
        left: 0;
        right: 0;
    }
    header {
        top: 0;
        height: 50px;
        background: pink;
    }
    main {
        top: 50px;
        bottom: 50px;
        background: lightyellow;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    footer {
        bottom: 0;
        height: 50px;
        background: lightcoral;
    }

    那选用 flex 布局又有什么好处呢,其实也没啥好处啦,就是让 <main> 少设了个 top 和 bottom 而已,显得比较响应,仅此而已

    甚至可以不设页眉页脚的高度,那就更响应了不是吗?

    #main {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }
    header {
        height: 50px;
        flex-shrink: 0;
        background: pink;
    }
    main {
        flex-grow: 1;
        background: lightyellow;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    footer {
        height: 50px;
        flex-shrink: 0;
        background: lightcoral;
    }

     效果图:

    备注:鉴于 flex 的兼容性一般的问题,别忘了加 -webkit- 和 -moz- ,如果你也和我一样懒,试试 prefixfree.min.js 或者 sublime 的 prefixfree 插件吧。

  • 相关阅读:
    <C> 链表 双向链表 栈 队列
    <C> 结构体
    <C> getchar()函数 如何把getchar()到的字符串存起来的实际应用
    DataSet转换为泛型集合和DataRow 转成 模型类
    对DataSet,DataRow,DateTable转换成相应的模型
    Json对象与Json字符串互转(4种转换方式)
    Android开发 使用HBuilder的缓存方法
    MIT_AI公开课p1p2学习笔记
    LeetCode_02 两数相加【链表】
    leetcode_01两数之和
  • 原文地址:https://www.cnblogs.com/foreverZ/p/flex-at-mobile-header.html
Copyright © 2011-2022 走看看