IOS 键盘弹出导致的position:fixed 无效问题

最新推荐文章于 2024-08-01 04:38:32 发布
转载 最新推荐文章于 2024-08-01 04:38:32 发布 · 476 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/keleyz/p/5533905.html

本文介绍了一种无需使用插件即可实现网页中间部分随滚动条上下移动的效果的方法，通过简单的CSS设置即可让网页的主体部分在固定头部和底部的同时，实现内容的滚动显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决办法(还未测试):

 

只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。可拷贝下面代码运行。
<!DOCTYPE html>

<html lang="zh_cmn">

<head>

<meta charset=utf-8 />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

<title></title>

<style>

.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;}

.head{top:0;}

.foot{bottom:0;}

.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;}

</style>

</head>

<body>

<header class="head">顶部固定区域</header>

<article class="main"  id="wrapper">  

    <div>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

    <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

     <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

    <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

  <input type="text" value="" class="inputtext"> <br>

  <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

   <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

     <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

    <input type="text" value="" class="inputtext"> <br>

     content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

    content <br>

  </div>

</article>

<footer class="foot">底部固定区域</footer>

</body>

</html>
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部

转载于:https://www.cnblogs.com/keleyz/p/5533905.html

微信小程序开发，软键盘唤起导致页面上推穿透导航（关于ios和android全面屏方面兼容需要调整的地方比较多）
u013776700的博客
08-02 3507
uniapp 小程序页面上推 定位问题
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 4099
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
iOS 下键盘唤出后，fixed 元素失效
屠苏的小笔记
03-15 3384
iOS大bug 遮罩一般要充满全屏，做好的办法就是设置容器position: fixed; 但是如果遮罩上面的弹框需要输入弹出键盘的话，这时fixed就失效了，比如这种情况： 键盘已经挡到了弹框，如果是fixed在底部的话，键盘唤起的时候，输入框并不会如期的在键盘顶部，而是不知道跑哪去了。。。。解题思路iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，那么假如页面不
ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法
dearbaba_8520的博客
07-03 251
ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法
iOS 软键盘弹起 fixed 错位
weixin_42531128的博客
08-01 204
给大家整理了一些有关【F,IO】的项目学习资料（附讲解～～）：https://edu.51cto.com/course/27963.htmlhttps://edu.51cto.com/course/36086.htmliOS 软键盘弹起固定错位问题解决指南 在iOS开发中，处理软键盘弹起时的界面布局问题是一项常见但复杂...
Ios端，软键盘弹起时，顶部导航栏fixed失效
RRRRRDong的博客
09-16 1540
最近写vue移动端项目时，遇到这么一个bug 在下拉框输入数据时，ios的软键盘弹出以后，顶部导航栏的fixed元素失效，当下拉列表元素超过一页时，再往下滑动，失效的fixed元素也会滚动下来。
移动端输入框调取iphone手机ios端键盘fixed定位失效如何解决
浮生离梦的博客
12-27 1745
一、需求问题 在开发移动端项目的时候，iphone手机的软键盘在弹出以后，会与 position:fixed 冲突发生问题。当ios系统的手机点击输入框的时候，软键盘就会弹出，底部的输入框就会被顶到上面来。当软键盘消失后，滚动区域没有正确的回正，会导致一些内容点击事件无效。fixed定位好的元素，会跟随页面一起滚动起来，fixed定位属性也就是会失效了。 二、需求分析 在ios软键盘被唤起后，页面...
uniapp 键盘弹起
最新发布
03-29
同时，考虑软键盘弹出时可能引起的页面高度变化，动态调整布局元素的位置。在UniApp中处理键盘弹起问题需结合平台特性和动态布局调整，以下是具体实现方法： ### 一、基础处理方法 1. **开启原生属性适配** ```vue ...
vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题
qq_38337245的博客
11-25 2034
坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴； 坑二：禁止页面放大缩小， 解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-优快云博客_移动端禁止放大缩小 坑三：移动端h5页面禁止长按选择复制， 解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-优快云博客 坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移， 解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷， 山头斜...
键盘遮挡问题
03-29
我自己又做了一遍 ，感觉还是自己动手能理解思路
解决fixed属性在ios软键盘弹出后失效的bug
08-19 688
　　这周在做空间（“类似”qq空间）项目。首页是好友发表的说说，可以针对每条说说进行评论，评论框吸附固定在屏幕底部。此时，Bug来了...在ios上，软键盘弹出后fixed属性失效了。后来发现，ios绝大部分情况把fixed变成了absolute。为什么说是绝大部分情况下而不是100%，后面会提到。下面介绍2种方案... 1、css布局（推荐） 　　解决思路：既然在 iOS ...
h5 ios中软键盘弹起后 fixed定位失效
huch的博客
08-21 9325
position: fixed;在ios手机中会存在一个失效情况： 如果页面有输入框存在，点击输入框软键盘弹起后会发现原先fixed定位在顶部的View不见了，ran’h
html开发，在ios中当软键盘弹出后，position：fixed失效
小馒头丶
10-28 9078
昨天在开发中碰到一个这样的问题，我的input标签的外面的div的css是position：fixed 但是当我用ios系统弹出软键盘的时候，出现的这样的情况 当键盘出来的时候，红色的div不见了。然后我就查了一下，是ios里面的就有这个bug。我就试了很多网上的方法都是不行。发现只有ios这样，安卓没有。我就做了个兼容判断 //评论输入框 var inter
解决IOS下唤起软键盘时fixed失效问题
快乐分享
07-03 4165
  刚入手vue就遇到以上问题,本来查了下网上说的很多解决方案,但是无奈没有一个试用于楼主需求的,自己解决吧~ 问题: fixed定位的div内输入框 focus 进入状态，则fixed定位的div被居中在屏幕可视区域 一、思路 IOS唤起软键盘(input框获取焦点),fixed定位相当于absolute,那就在获取焦点事件入手直接用absolute,当软键盘收起自动恢复fixed,所...
ios解决输入框弹出后position:fixed失效问题
司想君
03-10 5207
最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题。position:fixed在安卓2.2以上已经实现，但是在ios8以下系统当小键盘激活时，会出现位置错位的问题。 如下图： 受到优快云上刘华童鞋（http://my.youkuaiyun.com/liu__hua）的启发，找到了目前位置比较完美的解决方案。 DOCTYPE htm
ios中页面底部输入框，position:fixed元素的问题
banxia2152的博客
06-19 162
在安卓上点击页面底部的输入框，软键盘弹出，页面移动上移。ios上，软件盘弹出，输入框看不到了。让他弹出时让滚动条在最低部 var u = navigator.userAgent, app = navigator.appVersion; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (...
html输入框定位,iOS web html5 移动端 软键盘弹起遮挡输入框 输入框定位不准确
weixin_33389310的博客
06-08 565
移动web聊天页面，输入框在底部的时候，点击输入，弹起软键盘，iOS在将页面推上的时候会回弹一下，导致键盘刚好遮挡到输入框。而且在页面不同高度弹起的键盘对输入框的位置还不一样。(所受影响的元素此时是fixed定位)。在ios中此问题是很难解决。1. 当换起键盘的时候把输入框的fixed定位改为relative定位到页面的底部，当输入完成离开输入框的时候，再把输入框的定位改为fixed。这样不会引起...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值