Question

对于位于页面中心的div，我有以下样式

<div class="myStyle">Hi All...</div>

CSS代码：

<style>
.myStyle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

当虚拟键盘打开时，div被推高。我不明白为什么。有什么建议吗？

Answer 1

这是因为您的视口（或元素最接近的if.bind定位父级）正在垂直缩小。如果您不希望它移动，您必须确保具有relative位置的最近父级具有固定高度。

这是一个例子，第二个div将根据窗口的高度移动（打开开启Dev Tools的片段全屏）

relative

.row {
  width: 100vw;
}
.col {
  width: 50%;
  float: left;
  position: relative;
  background: #eee;
}

.col > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  background: #0095ee;
  color: #fff;
}

Answer 2

它将从视口调整到前50％。尝试修复一些高度到该div并给出如下的CSS。奇怪的效果将会减少。例如，如果弹出窗口的高度为400px，宽度为600px（宽度也可以百分比给出）

 .div {
    width:600px;
    height:400px;
    position:fixed;
    margin : auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
 }

但如果你根本不想推div。然后你必须提到顶部像素。要使其在所有设备中运行，您可能必须使用javascript。就像在javascript中获取视口的高度一样，根据视口高度计算要指定的顶部。以像素为单位应用计算的顶部。

例如，如果您想要指定为50％。然后是伪javascript代码。

 var divHeight = document.height;
 var desiredTop = viewportHeight/2;
 div.style.top = desiredTop;

但是给予固定顶部的缺点是div有可能隐藏在键盘后面。

当虚拟键盘可见时，页面中心的CSS项目被推高

2 个答案: