Question

我有height: 100%的正文和HTML，因为有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

原因是当键盘弹出时，设备的视口会缩小，并且图像会调整为减小的高度。解决方案是确保div项始终确保高度为100％。

考虑制作

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

考虑将.background设置为相对位置，并将其位置设置为相对高度100％，而不是在主体内部设置背景div

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

}

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

.form-contents{
    position:absolute;
}

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

1 个答案: