console 命令行工具 X clear
console
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js">

	</script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}


		body {
			text-align: center;
		}

		div {
			height: 200px;
			line-height: 200px;
			width: 100%;

		}

		.top {
			background: #ccc;
			margin-bottom: 10px;
		}

		#myinput {
			height: 100px;
			width: 80%;
			margin: auto;
            border:1px solid red;
		}

		.bottom {
			background: #eee;
			position: absolute;
			bottom: 0px;
		}
	</style>
	<title>测试</title>
</head>

<body>
	<div class="top">【顶部区域】高度如果不够请自行调整</div>
	<input type="text" id="myinput" placeholder="点击输入框试试">
	<div class="bottom">
		【底部区】 高度如果不够请自行调整
	</div>
</body>
<script>
    $("#myinput").bind('focus click',function(){
        $('.bottom').hide(); //尝试注释掉这行后再运行看看。
    });

    $("#myinput").blur(function(){
        $('.bottom').fadeIn();
    });
</script>
</html>