absolute定位元素被输入法输入框顶起

namelesswei 2015-12-02 05:54:15

我用absolute定位页面底部一个logo，页面有input框，当点击input弹出输入法输入框的时候，底部绝对定位的logo被输入框顶起来了（ios端正常），有没有啥解决方式？

...全文

2323 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

wanderingLight 2019-03-18

打赏
举报

谢谢,只能通过聚焦和失焦解决啦~

不可want语 2018-12-21

打赏
举报

聚焦隐藏失焦显示

風灬雲 2018-10-08

打赏
举报

你的情况应该是页面高度没有屏幕高度大吧；所以用了height:100%；定位到底部；
手机按键出来的时候相当于浏览器的resize;100%就只有那么高，所以会这样；
可以试试input获取焦点的时候隐藏logo；失去焦点的时候再显示logo

weixin_42450613 2018-08-09

打赏
举报

你这个是因为高度的100%导致的所以js加一句就完美搞定
$(document).ready(function () { $('.index').css({'height':$(window).height()})});

misaka去年夏天 2015-12-03

打赏
举报

给出你的代码。。。。

namelesswei 2015-12-03

打赏
举报

@以专业开发人员为伍 @misaka去年夏天 @xuzuning

KK3K2005 2015-12-03

打赏
举报

应该是没有定义height bottom:10%; 是相对于什么的10%呢？ . html,body ,.index{ height:100% }

namelesswei 2015-12-03

打赏
举报

引用 6 楼 qq_24442963 的回复:

这个我有碰到过。在input输入框那里添加获得焦点事件和失去焦点事件，获取焦点则修改.logo的position属性为fixed，失去焦点改为absolute，这样就可以了。可以写style: .logo{} .logoFocus{} 获取焦点时，把class的logo移除，添加logoFocus，失去焦点反之，实现起来简单一点。希望能帮到你。

差不多也只能这样了

namelesswei 2015-12-03

打赏
举报

引用 5 楼 u011376884 的回复:

不用absolute定位不就行了

不用absolute，我用margin-top 百分比不用分辨率手机效果不一样，没办法

qq_24442963 2015-12-03

打赏
举报

这个我有碰到过。在input输入框那里添加获得焦点事件和失去焦点事件，获取焦点则修改.logo的position属性为fixed，失去焦点改为absolute，这样就可以了。可以写style: .logo{} .logoFocus{} 获取焦点时，把class的logo移除，添加logoFocus，失去焦点反之，实现起来简单一点。希望能帮到你。

逝_去_的_光_阴 2015-12-03

打赏
举报

不用absolute定位不就行了

misaka去年夏天 2015-12-03

打赏
举报

输入法把整个页面顶起来了，不知道怎么解决。。。发到HTML版块去问问吧

namelesswei 2015-12-03

打赏
举报

引用 2 楼 misakaqunianxiatian 的回复:

给出你的代码。。。。

<!doctype html>
<html>
	<head>
		<title>123</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
	</head>
	<body onclick="">
		<style>
			.index{
				width:100%;
				overflow:hidden;
			}
			.logo{
				position:absolute;
				bottom:10%;
				width:100px;				
			}
			.logo img{
				width:100%;
				display:block;
			}
		</style>
		<div class="index">
			<div><input type="text"></div> 
 			<div class="logo">
 				<img src="http://m.baidu.com/static/index/plus/plus_logo.png">
 			</div>
		</div>
 
	</body>
</html>

你用微信打开这个页面，点击输入框就可以看到效果