zoukankan      html  css  js  c++  java
  • 移动端使用绝对定位来模拟固定定位

    一、原因

      固定定位是参考布局视口做定位的,而在移动端,存在布局视口、视觉视口、理想视口,如果适配方案使用不正确,很容易造成布局错误。

    二、案例1,有问题版本,在唤起虚拟键盘的时候,布局错乱了。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>移动端使用绝对定位来模拟固定定位</title>
            <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
            <style type="text/css">
                *{margin: 0; padding: 0;}
                #global-wrapper .header{
                    width: 100%;
                    height: 100px;
                    position: fixed;
                    left: 0;
                    top: 0;
                    background-color: #0000FF;
                }
                .footer{
                    width: 100%;
                    height: 100px;
                    position: fixed;
                    left: 0;
                    bottom: 0;
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div id="global-wrapper">
                <div class="header"></div>
                在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    <input type="text" name="name" id="name" />
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                <div class="footer"></div>
            </div>
        </body>
    </html>

    三、案例2,绝对定位版本,布局没有错乱,

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>移动端使用绝对定位来模拟固定定位</title>
            <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
            <style type="text/css">
                *{margin: 0; padding: 0;}
                html,body{
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
                #global-wrapper{
                    width: 100%;
                    height: 100;
                    overflow: auto;
                }
                #global-wrapper .header{
                    width: 100%;
                    height: 100px;
                    position: absolute; /*相对body进行定位,上下移动的时候只是移动global-wrapper,而body没有动*/
                    left: 0;
                    top: 0;
                    background-color: #0000FF;
                }
                .footer{
                    width: 100%;
                    height: 100px;
                    position: absolute;/*相对body进行定位*/
                    left: 0;
                    bottom: 0;
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <div id="global-wrapper">
                <div class="header"></div>
                在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    <input type="text" name="name" id="name" />
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                    在做移动端业务开发时,<br/>经常碰到fixed元素和输入框<br/>同时存在的情况。在手机软键盘唤起的情<br/>况下,会造成原本<br/>fixed定位的元素跟随软键盘而<br/>上浮,对整体布局造成冲击<br/>。来看这<br/>样一个栗子直观的感受<br/>一下这个bug。
                <div class="footer"></div>
            </div>
        </body>
    </html>

    效果是没有错乱的,使用绝对定位,头部和尾部都是相对body进行定位,上下移动的时候只是移动global-wrapper,而body没有动,布局没有错乱

  • 相关阅读:
    [转载]从程序员到项目经理:思维一换天地宽
    针对后台TCP服务F5健康检查配置
    [转载]生活在 Emacs 中
    [转载]为何 Emacs 和 Vim 被称为两大神器
    Emacs文件命令
    功能点估算速记
    [转载]CMMI之功能点估算法:EI、EQ和EO
    一些有用的 Emacs 配置(窗口快速切换、一键透明效果、任意位置删除整行等)
    refiling失败报错Invalid function: org-preserve-local-variables
    Cognos定时Email发送报表数据功能
  • 原文地址:https://www.cnblogs.com/llcdxh/p/9631737.html
Copyright © 2011-2022 走看看