在移动设备上使用 textarea 时重叠 div

Question

在下面的图片中，我认为问题是不言自明的。在尝试输入文本之前，内容可以完美运行。任何有关导致此问题的建议将不胜感激。抱歉图片太大了。为了便于阅读，我删除了一些 HTML（徽标、菜单和隐藏的导航栏）

 <section class="contact-background" id="particles-js" >
</section>
    <section class="contact-page">
<div class="contact-container">
    <h1>Get In Touch</h1>
        <div class="border"></div>
    <p>I'll get back to you promptly</p>
    <form class="contact-form" action="contactform.php" method="POST">

        <input class="contact-form-text" type="text" id="name" name="name" placeholder="Full name" tabindex="1" required>
        <input  class="contact-form-text" type="email" name="email" placeholder="Your E-mail" tabindex="2" required>
        <input class="contact-form-text" type="text" id="subject" name="subject" placeholder="Subject" tabindex="3" required>
        <textarea class="contact-form-text" id="message" name="message" placeholder="Message" tabindex="4"></textarea>
        <button class="contact-form-button" type="submit" name="submit" value="Send">Send</button>

    </form>
</div>
</section>

    body{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;;
} 

#particles-js{
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}

 .contact-page{
    height: 100%;
    width: 100%;
}

 .contact-container{
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contact-form{
    display: flex;
    max-width: 60rem;
    padding: 2rem;
    flex-direction: column;
    align-items: center;
}

Answer 1

这与您对position: absolute; 的使用有关。你为什么在你的大部分容器元素上使用它？

Answer 2

我在这里看到的一个问题是接触容器 css，您将高度设置为 100% 并将内容设置为中心。因此，当您的键盘在您的视口上时，您的视口会变小，并且包括表单和 h1 在内的所有内容都试图保持居中。

您的联系人容器是绝对位置，因此它将是 HTML 标记的绝对位置，而表单将尝试相对于 HTML，而不是联系人容器包含。

尝试将联系人容器位置更改为相对位置。