解决IOS底部fixed定位失效问题_ios13 钉钉 fixed不居底部-程序员宅基地

技术标签: JS  fixed  fixed定位在ios的bug  

解决办法:要把带fixed定位的元素,和滚动的元素分开来,不要混了层级,头部,底部都拿到外面来,如下

html

<body>
    
    <div class="header">头部</div>

    <div class="main">
        <div class="content">
            <!-- 内容区域(可以滚动的区域) -->
        </div>
    </div>

    <footer class="footer"> 
        <!-- fixed定位的底部 -->
        <input type="text" placeholder="请输入姓名">
    </footer>
</body>

    css
        .header,.footer,.main {
            display: block;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30px;
        }

        .main {
            /*main绝对定位,进行内部滚动*/
            position: absolute;
            /*top是头部的高度*/
            top: 100px;
            /*bottom是底部的高度*/
            bottom: 30px;
            /*使之可以滚动*/
            overflow-y: scroll;
            /*增加弹性滚动,解决滚动不流畅的问题*/
            -webkit-overflow-scrolling: touch;
        }

        .main .content {
            height: 2000px;
        }


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jw19950424/article/details/80655125

智能推荐

[STM32F1]如何使用stm32快速建立tcp和udp连接?_stm32 udp-程序员宅基地

文章浏览阅读179次。使用w5500或者esp8266做mqtt的话,还需要自己移植相关的mqtt代码过来,或者下载mqtt的固件才能使用。MQTT是一种轻量级的、基于发布/订阅模式的通讯协议,它能够在带宽有限和延迟敏感的网络环境中提供可靠的消息传输服务。stm32使用NT1-B实现了远程的tcp和UDP的连接。之前都是使用w5500或者esp8266来做网络配置,需要实现的代码比较复杂,而且会占用比较多的内存。W5500的官方SDK通常提供网络协议栈的支持,但MQTT协议的实现可能需要用户自己完成或使用第三方的库。_stm32 udp

golang适合做什么_golang语言适合做什么-程序员宅基地

文章浏览阅读536次。Golang(Go语言)是一种开源的编程语言,由Google开发并于2009年首次发布。作为一门现代化的编程语言,Golang在性能、并发性和可靠性方面具有显著的优势,因此被广泛应用于构建高性能、可伸缩、并发和可靠的服务器端应用程序。本文将深入探讨Golang适合做什么,并介绍它在不同领域的应用。_golang语言适合做什么

如何优化LOG FILE SYNC_log file sync 优化-程序员宅基地

文章浏览阅读617次。在一个提交十分频繁的系统中,我们经常会看到LOG FILE SYNC等待事件排在TOP EVENTS中。这种情况下,我们可能就需要针对LOG FILE SYNC等待事件进行优化了。 首先我们会看一下这个等待事件平均的等待时长,正常情况下这个等待事件的平均等待时间不会超过10毫秒,如果等待时间太长,那说明LOG WRITER每次写入的时间过长,如果能够优化一下REDO LOG文件_log file sync 优化

第一个android程序——贷款计算器-程序员宅基地

文章浏览阅读1k次,点赞2次,收藏12次。第一个android程序比较简单,具体的要求是,编写一个简单的贷款计算器,根据输入的贷款金额、期限和利率,显示每月应还款的金额。要求合理的使用布局进行界面设计,对输入的数据错误使用toast通知机制显示。 &lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;GridLayout ="http://sc..._银行贷款计算器android课设

接口自动化入门:Jmeter的多组数据测试、JDBC驱动及数据断言!-程序员宅基地

文章浏览阅读914次,点赞8次,收藏7次。在进行接口测试时,我们经常需要对接口进行多组数据测试,以验证接口在不同输入条件下的表现。同时,我们也需要对接口返回的数据进行断言,以确保接口返回的数据符合预期结果。JMeter正是一个强大的工具,可以帮助我们实现这些需求。

RuoYi-Vue-Plus(登录流程-验证码生成)_ruoyi-vue-plus百度网盘-程序员宅基地

文章浏览阅读135次。1- 进入登录页面,调用 com.ruoyi.web.controller.common.CaptchaController 类中的captchaImage 方法,2- 提交 登录信息 + 验证码 + uuid 比对错误:返回错误信息,删除缓存的验证码,加入缓存。_ruoyi-vue-plus百度网盘

随便推点

yolov5分割_一文读懂YOLO V5 与 YOLO V4-程序员宅基地

文章浏览阅读1.9k次。YOLO之父Joseph Redmon在今年年初宣布退出计算机视觉的研究的时候,很多人都以为目标检测神器YOLO系列就此终结。然而在4月23日,继任者YOLO V4却悄无声息地来了。Alexey Bochkovskiy发表了一篇名为YOLOV4: Optimal Speed and Accuracy of Object Detection的文章。YOLO V4是YOLO系列一个重大的更新,其在CO..._yolov5图像分割原理

Oracle应用之to_char(参数,'FM990.00')函数-程序员宅基地

文章浏览阅读1w次,点赞5次,收藏13次。遇到一个SQL,记录一下select to_char(参数,'FM990.00') from 表格刚看到FM990.00确实不知道什么意思,通过网上资料,知道了0表示:如果参数(double或者float类型)存在数字就显示数字,不存在数字就显示09表示:如果参数(double或者float类型)存在数字就显示数字,不存在数字就显示空格FM表示:将9带来的空格删除拓展:所以上面例子..._fm990.00

jquery项目转vue_jquery改写成vue-程序员宅基地

文章浏览阅读2.7k次。jquery项目转vue转载文章https://blog.csdn.net/violetjack0808/article/details/51451672,为了方便自己查看,后续加一些自己的总结。(一) jQuery和Vue的区别jQuery是使用选择器 ($) 选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val();,它还是依赖DOM元素的值。_jquery改写成vue

Centos终端显示-bash-4.2#的解决方法_-bash-4.2#原因及解决方法-程序员宅基地

文章浏览阅读1.5k次。如果登录的不是root用户,那么将上面的文件拷贝到登录用户对应的home目录下:为/home/{用户名}目录。拷贝完成过后,重新进行登录即可。而不是root@主机名 + 路径的显示方式,发生这种情况的原因是根目录下缺失几个配置文件,从默认配置中拷贝过来就可以解决了。登录linux系统过后,突然发现显示的是。_-bash-4.2#原因及解决方法

[Xilinx FPGA] #10 ISE、Vivado、SDK、HLS 错误记录 [持续记录中]_ise执行cleanup project files会删掉io pin planning吗-程序员宅基地

文章浏览阅读1.7k次。这里记录的是,在 ISE、Vivado 与 SDK的日常使用中,笔者遇见过的报错及其解决方法ISE 14.7ISE WARNING:ProjectMgmt - File /*filePath*/ is missing.有可能原因,在建立工程后,修改了工程名或工程中某模块名称等信息,而 ISE 在重新综合编译时会读取上次综合编译的信息。只需将之前综合编译产生的各文件删除,再重新综合编译..._ise执行cleanup project files会删掉io pin planning吗

css cursor鼠标指针光标样式default pointer hand url_cursor:url c++-程序员宅基地

文章浏览阅读1.5k次。Css cursor鼠标指针鼠标光标样式教程篇我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式。扩展阅读:css指针一、cursor语法_cursor:url c++