解决IOS移动端固定定位失效问题
根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上不起作用。
<div class="header">头部</div> <div class="main">
<div class="content">
<!-- 可以滚动的区域 -->
</div>
</div> <footer class="footer">
<!-- fixed定位的底部 -->
<input type="text" placeholder="请输入姓名">
</footer>
.header {
position: fixed;
top:;
left:;
right:;
height: 100px;
} .footer {
position: fixed;
bottom:;
left:;
right:;
height: 30px;
} .main {
/*main绝对定位,进行内部滚动*/
position: absolute;
/*top是头部的高度*/
top: 100px;
/*bottom是底部的高度*/
bottom: 30px;
/*使之可以滚动*/
overflow-y: scroll;
/*增加弹性滚动,解决滚动不流畅的问题*/
-webkit-overflow-scrolling: touch; }
解决IOS移动端固定定位失效问题的更多相关文章
- 解决ios移动端双击页面下移
ios移动端在双击弹出层的时候会出现页面下移,露出底层页面的现象 解决办法: <!DOCTYPE html> <html> <head> <meta char ...
- 解决IOS移动端 Safari流浪器 onclick无法触发的问题
在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变 ...
- 两种解决IE6不支持固定定位的方法
有两种让IE6支持position:fixed1.用CSS执行表达式 *{margin:0;padding:0;} * html,* html body{ background-image:url(a ...
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
- 移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案
如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1 ...
- IOS使用固定定位遇到的问题
近日需要实现移动端页面额外功能按钮,即点击加号弹出点赞与留言功能,通常这个按钮都会固定于页面的右下角,首先就想到使用固定定位来实现. 但是在测试时我们发现,在IOS中,当系统键盘弹出时,fixed会失 ...
- IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input
移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...
- iOS 固定定位不兼容、input获取焦点后位置不对。
第一次写博客~ 大家悠着看,有则改之,无则加冕,对不对的给个回复,让我知道你的存在. 在做活动页的时候,经常会碰到一些需要弹出显示的输入框(情节前提:本人安卓机~),前天自己写的时候自己调试没问题后 ...
- 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能
解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...
随机推荐
- MT【298】双参数非齐次
若函数$f(x)=x^2+(\dfrac{1}{3}+a)x+b$在$[-1,1]$上有零点,则$a^2-3b$的最小值为_____ 分析:设零点为$x_0$,则$b=-x^2_0-(\dfrac{1 ...
- Coding and Paper Letter(五十八)
资源整理. 1 Coding: 1.支持TMS.WMTS标准瓦片下载,支持百度地图瓦片.高德地图瓦片.腾讯地图瓦片.天地图.ArcServer Rest瓦片.ArcServer本地缓存切片.geose ...
- 【UOJ#246】套路(动态规划)
[UOJ#246]套路(动态规划) 题面 UOJ 题解 假如答案的选择的区间长度很小,我们可以做一个暴力\(dp\)计算\(s(l,r)\),即\(s(l,r)=min(s(l+1,r),s(l,r- ...
- HR_Array Manipulation
第一版有7个时间超限,优化成了第二版: 1: #!/bin/python3 import math import os import random import re import sys # Com ...
- JIRA和Confluence更改JVM内存大小解决访问打开缓慢问题
原因: 根据主机物理内存不同,默认的java虚拟机内存也会不同(一个较低值),有时候不够用,可以修改默认设置,改善内存不足导致的问题. 操作步骤: JIRA 1. 打开至相应目录: ~]# cd / ...
- ftp文件共享服务详解
ftp 文件共享服务,文件的上传下载 跨平台,tcp协议 21号(命令端口) 20号(数据端口,主动模式) 默认情况 ftp服务运行被动模式 vsftpd:软件 非常安全的rpm -qi vsftp ...
- ANIS与UNICODE字符格式转换:MultiByteToWideChar() 和WideCharToMultiByte() 函数
资料来自: http://blog.csdn.net/holamirai/article/details/47948745 http://www.cnblogs.com/wanghao111/arch ...
- 第三篇-ubuntu18.04下截图快捷键
ubuntu自带的截图工具感觉能够满足基本的截图功能,可以不必安装另外的截图软件. 一般用到的截图类型有三种:全屏.当前活动窗口.自定义区域,其中自定义区域截图是最灵活也是我们用的最多的方式.在ubu ...
- 基于tensorflow的MNIST手写数字识别(二)--入门篇
http://www.jianshu.com/p/4195577585e6 基于tensorflow的MNIST手写字识别(一)--白话卷积神经网络模型 基于tensorflow的MNIST手写数字识 ...
- python简单购物车改进版
# -*- coding: utf-8 -*- """ ┏┓ ┏┓ ┏┛┻━━━┛┻┓ ┃ ☃ ┃ ┃ ┳┛ ┗┳ ┃ ┃ ┻ ┃ ┗━┓ ┏━┛ ┃ ┗━━━┓ ┃ 神 ...