移动键盘后表格跳起来

Question

我制作了一个移动响应式网站。也添加了一个联系表格，但是当我在移动版本中并且移动键盘出现时，联系表格会跳起来，因为键盘将它向上推。我的问题是，我怎样才能让它更具吸引力？

.modal-bg{
    position: fixed;
    top:-40px;
    bottom: 0;
    left: 0;
    width:100%;
    height: 125vh;
    background-color: rgba(0,0,0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0; 
    transition: visibility 0s opacity 0.5s;
  }
  
   .modal{
    position: relative;
    background-color: white;
    width: 40%;
    height: 60%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    
  }



 @media screen and (max-width: 1024px) {

    /*mobile contact form*/
    .modal{
        width: 95%;
        height: 90%;
        z-index: 2;
      }

    .contact-form .message{
        max-width: 60%;
    }


    .modal-bg{
        z-index: 2;
    }
    
      }

<div class="modal-bg">
                <div class="modal">
                    
                    <form class="contact-form" id="contactformid" action="contactform.php" method="post">
                    <h2>Contact Us!</h2>
                    <label for="name">Name: </label> </br>
                    <input type="text" name="name" id="cname" placeholder="Your name">  </br>
                    <label for="email">E-mail</label> </br>
                    <input type="text" name="mail" id="cmail" placeholder="Your e-mail"> </br>
                    <label for="subject">Subject:   </label> </br>
                    <input type="text" name="subject" id="csubject" placeholder="Subject"> </br>
                    <label for="message">Message:   </label> </br>
                    <textarea name="message" class="message" id="cmessage" placeholder="Message"  rows="12" cols="50"></textarea> </br>
                    
                    <div class="g-recaptcha" data-sitekey="6LeWdswZAAAAAMZ95M__-qzoHYlSYJ3z-2brnlx3"></div>
                    <button class="cta-add" type="submit" name="submit" > SEND </button>
                </form>
                    <span class="modal-close">X</span>
                </div>
            </div>

键盘前后。

Answer 1

我为它增加了更多的高度。还是会跳起来的，不过跳起来也不好看

移动键盘后表格跳起来

Form Jumps up after Mobile Keyboard

html

css

keyboard

mobile

contact-form