Html 当手机上弹出虚拟键盘时，Div会跳起来

我的一个

div

s有问题。我试图让我的设计尽可能的响应，导致了一些错误。当我想在手机上键入新地址时，白色的

wrapperdiv

会跳起来

我正在开发的网站是

HTML

---

我很清楚这可能是一个非传统的网站

<div class="row">
<div class="logo"></div> 
<div class="times"></div>
</div>

html, body {
background: url(img/background.jpg);
height:100%;
background:cover;
}
* {
padding: 0;
margin: 0;
}
.row {
display:block;
background-color:rgba(255,255,255,0.5);
width: 80%;
position:fixed;
left:10%;
top:10%;
height: 80%;
}

.columns {
display: inline-block;
position: relative;
position: fixed;
height: 80%;
width:inherit;
left:0;
top: 10%;
padding-bottom:0;
.align-right {
text-align: center;
}
@media screen and (max-width: 680px) {
.columns {
width: 100%; 
}
}
}
@media only screen and (max-width: 2000px){
.logo {
margin-left:auto;
margin-right:auto;
width:400px;
height:208px;
background-image: url(img/logo1.png);
background-repeat: no-repeat;
text-align:center;
}
}

@media only screen and (max-width: 768px){
.logo {
margin-left:auto;
margin-right:auto;
width:200px;
height:108px;
background-image: url(img/logo.png);
background-repeat: no-repeat;
text-align:center;
}   
}
@media only screen and (max-width: 2000px){
.times {
margin-left:auto;
margin-right:auto;
width:350px;
height:100%;
background-image: url(img/times1.png);
background-repeat: no-repeat;
text-align:center;
margin-top:3%;
}
}
@media only screen and (max-width: 768px){
.times {
margin-left:auto;
margin-right:auto;
width:200px;
height:100%;
background-image: url(img/times.png);
background-repeat: no-repeat;
text-align:center;
margin-top:3%;
}   
}