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

Question

So I'm doing a website with a "Modal Popup" login form responsive to mobile first and I have a footer to the end of the modal container.所以我正在做一个网站，它的“Modal Popup”登录表单首先响应移动设备，并且我在模态容器的末尾有一个页脚。 The problem is when I want to write something in both inputs, the keyboard appears and it push the footer up.问题是当我想在两个输入中写一些东西时，键盘会出现并将页脚向上推。 I want the footer to stay in the position and the keyboard just don't resize my modal container or have interaction with the website.我希望页脚留在 position 中，键盘只是不调整我的模态容器的大小或与网站进行交互。

This is how it look without showing the keyboard这是不显示键盘的样子

And this is when it push the footer up.这就是它向上推动页脚的时候。

Here's the code.这是代码。

 * { 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>

Answer 1

I played around with the code you have shared and noticed that you have set the Height of modal-content to 90%.我玩弄了您共享的代码，并注意到您已将modal-content的高度设置为 90%。

So it re-adjusts the height of your Modal to 90% of the screen height available which changes when the keyboard is open.因此，它会将您的 Modal 的高度重新调整为可用屏幕高度的 90%，当键盘打开时该高度会发生变化。

So my recommendation is to set a fixed height like 300px instead of % and have a different height for mobile devices using media-queries.所以我的建议是设置一个固定的高度，比如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;
}

Let me know if you need any more clarification.如果您需要更多说明，请告诉我。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-06 05:21:58

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-06 05:21:58

解决方案1
0 已采纳 2020-08-06 05:21:58