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

如何解决在移动设备上使用textarea时重叠div

在下面的图片中，我认为这个问题可以自我解释。内容可以完美工作，直到尝试输入文本为止。任何原因的任何建议将不胜感激。抱歉，图像太大。我删除了一些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;
}

解决方法

您可以使用position: absolute;来做到这一点。为什么在大多数容器元素上使用它？

,

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

您的contact-container位置是绝对的，因此它对于HTML标签是绝对的，而表单将尝试相对于HTML，而不是contact-container包含。

尝试将接触容器的位置更改为相对位置。