如何防止 android 键盘将我的容器向上推？答案

【问题标题】：How do I prevent the android keyboard push my container up?如何防止 android 键盘将我的容器向上推？
【发布时间】：2020-08-06 13:21:58
【问题描述】：

所以我正在做一个网站，它的"Modal Popup" 登录表单首先响应移动设备，并且我在模态容器的末尾有一个页脚。问题是当我想在两个输入中写一些东西时，键盘会出现并将页脚向上推。我希望页脚保持在该位置，并且键盘只是不调整我的模态容器的大小或与网站进行交互。

This is how it look without showing the keyboard

And this is when it push the footer up.

这是代码。

* {
    margin:0;
    padding:0;
}

header{
    background-color:red;
    width:100%;
    height:30px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.to-modal-container{
    background-color:blue;
    width:100%;
    height:200px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.to-modal{
    background:red;
}

.bg-modal{
    width: 100%;
    height:100%;
    background-color:rgba(0, 0, 0, .5);
    position:absolute;
    top: 0;
    display:flex;
    justify-content: center;
    align-items: center;
}

.modal-content{
    width:90%;
    height:50%;
    background-color: white;
    border-radius: 4px;
    text-align: center;
    padding-top: 20px;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
}

input {
    width:50%;
    display: block;
    margin:15px auto;
}

<!DOCTYPE html>
<html>
<head>
    <title>MODAL TESTING</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<header>
    <div>
        <span>LOGO</span>
    </div>
</header>
<div class="to-modal-container">
    <div class="to-modal">
        <span><a href="#">CLICK AQUI</a></span>
    </div>
</div>
<div class="bg-modal">
    <div class="modal-content">
        <span>LOGO</span>
        <div class="form-container">
        <form action="">
            <input type="text" placeholder="Name">
            <input type="Password" placeholder="Password">
            <a href="" class="button">Submit</a>
        </form>
        </div>
        <div class="footer-container">
            <span>THIS IS THE FOOTER</span>
        </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： android html css responsive-design keyboard

【解决方案1】：

我试用了您共享的代码，发现您已将 modal-content 的高度设置为 90%。

因此，它会将 Modal 的高度重新调整为可用屏幕高度的 90%，当键盘打开时会发生变化。

所以我的建议是设置固定高度，例如 300px 而不是 %，并为使用媒体查询的移动设备设置不同的高度。

.modal-content{
    width:90%;
    /* height:50%; */
    height: 300px;
    background-color: white;
    border-radius: 4px;
    text-align: center;
    padding-top: 20px;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
}

如果您需要更多说明，请告诉我。

【讨论】：

就是这么简单！十分感谢。我很沮丧，以至于我失明了，没有看到。