最近在做移动端登录页的时候,发现每次输入账号密码,底部的版权信息(absolute定位到底部)就会被软键盘顶上来,遮住账号密码输入框,后边想到了一个办法,给整个主题加一个最小高度,这样软键盘出来之后也不会被顶上来。有不足之处还望指出,下面看代码
html:
<div class="login_box">
<div class="weui-cell_vcode clearfix login_input_box">
<div class="weui-cell__bd float_l">
<input class="weui-input" type="tel" placeholder="请输入用户名">
</div>
</div>
<div class="weui-cell_vcode clearfix login_input_box">
<div class="weui-cell__bd float_l">
<input class="weui-input" type="password" placeholder="请输入密码">
</div>
</div>
<button class="weui-btn weui-btn_primary">登录</button>
<p class="ns_copy f14 txt_c">Copyright © 2001-2017 Hwei.net</p>
</div>
css:
.login_box{
position: fixed;
width: 100%;
height: 100%;
min-height: 600px; //关键就在这里
padding:80px 60px 0 60px;
}
.ns_copy{
position: absolute;
bottom: 40px;
color:@ccc;
}