webapp页面中底部版权bottom或者footer在调出输入法的时候上窜遮挡其他元素的问题解决方案,输入法跳出时底部bottom遮挡问题

标题:webapp页面中底部版权bottom或者footer在调出输入法的时候上窜遮挡其他元素的问题解决方案,输入法跳出时底部bottom遮挡问题

通过css即可解决问题。

范例代码:

webapp页面中底部版权bottom或者footer在调出输入法的时候上窜遮挡其他元素的问题解决方案,输入法跳出时底部bottom遮挡问题<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;
		font-family: microsoft yahei;
	}

	html {
		height: 100%;
	}

	body {
		position: relative;
		min-height: 100%;
	}

	.head1 {
		padding: 10px 0px;
		text-align: center;
		color: #fff;
		background: #F08519;
		font-size: 24px;
	}

	.center .biaoti2 {
		padding: 10px 0px;
		font-size: 16px;
		text-align: center;
	}

	.center .searchArea {
		text-align: center;
	}

	.searchArea {
		border: 1px solid red;
		padding-bottom: 100px;
	}

	input#fwm {
		-webkit-appearance: none;
		padding: 5px;
		width: 60%;
		max-width: 250px;
		height: 27px;
		font-size: 18px;
		border: 1px solid #AAA;
		margin-top: 20px;
	}

	input#tijiao {
		height: 40px;
		font-size: 18px;
		border: none;
		border-radius: 2px;
		background-color: #f08519;
		color: #fff;
		width: 24%;
		margin-top: 20px;
		max-width: 150px;
		text-align: center;
		-webkit-appearance: none;
	}

	.bottom {
		position: absolute;
		text-align: center;
		width: 100%;
		bottom: 10px;
	}
	</style>
	<title>测试</title>
</head>

<body>
	<div class="head1">测试测试</div>
	<div class="center">
		<div class="biaoti2">请输入内容
		</div>
		<div class="searchArea">
			<input type="text" name="fwm" id="fwm" placeholder="输入内容" maxlength="16">
		</div>
	</div>
	<div class="bottom">
		<input type="button" value="提交" id="tijiao">
	</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/sysdzw/article/details/81348605