css - 在移动设备中弹出键盘时背景图像不完整

Question

我的正文和 HTML 具有 height: 100% 因为容器(中心容器)的 vertical-align 东西。我的问题我在这里有表格，当我在表格中聚焦文本框时，通常浏览器强制页面到顶部，我对此没有意见。关键是为什么当键盘在移动设备中弹出时我的背景变得不完整和有缺陷？？

<div class="container d-flex h-100 justify-content-center align-items-center">
    <div class="row justify-content-center" id="Level-1">
        <div class="col-12">
            <div class="row flex-column justify-content-center align-items-center">
                <div class="col-auto">
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                </div>
                <div class="w-100"></div>
                <div class="col-lg-8">
                    <div class="row justify-content-center">
                        <form>
                            <div class="form-group d-flex justify-content-center">
                                <input type="tel" class="form-control rounded stroke text-center" id="inputEmail3" placeholder="phone number">
                            </div>
                            <div class="form-group d-flex justify-content-center">
                                <button onclick="" type="submit" class="btn btn-block rounded buttonStyle " id="SendPhone">SEND</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

这是我的风格:

html{
  height: 100%;
  background: #1c7430;
}

body{
  height: 100%;
  background: url("../images/BG-web.jpg") center/cover no-repeat;
}
.rounded{
  border-radius: 20px !important;
}
.stroke{
  border: 2px solid #1c7430;
}
.buttonStyle{
  background-color: $orange_color;
}
.buttonStyle:disabled{
  background-color: $disabled_color;
}
.vertical-center {
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

Answer 1

原因是当键盘弹出时设备的视口(viewport)缩小并且图像被调整到减小的高度。解决方案是确保您的 div 元素始终确保 100% 的高度。

考虑制作

html,body{
   height:100%;
}
.container{
   min-height:100%;
}

与其将背景设置在 body 内，不如考虑使用类 .background 制作一个额外的 div，将其位置设置为相对位置并将高度设置为 100%

.background{
    position:relative;
    background:url("yourimage") cover no-repeat;
    height:100%;

} 

使用 .form-contents 类在 div 中设置表单内容并设置绝对位置

.form-contents{
    position:absolute;
}