css - 在移动设备上使用 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;
}

标签： cssmobilelayoutoverflow

Answer 1

它与您使用position: absolute;. 为什么您在大多数容器元素上使用它？