联系表 Div 与页脚重叠

Question

我正在制作自己的作品集，想在上面添加一个联系表。但是包含表单的 div 在小屏幕上与页脚重叠。您可以通过运行代码片段看到问题。谁能帮我解决这个问题？这将是一个很大的帮助。非常感谢。

#contactus {
    height: 105vh;
    margin: 0 auto -80px;
    position: relative;
    z-index: 1;
}

#formContainer{ width: 85%;  margin: 0 auto; background-color: aqua;   }

.contactHead{ text-align: center}

.footer{
  height:250px;
  background-color:#1e1e1e;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer h2{
  
  color: #fff;
  
}

<div id="contactus">
 
 <div id="formContainer">
  <h1 class="contactHead">Get In Touch!</h1>
  <h4 class="contactHead">I will be with you within 24 hours</h4>
  
  <form id="contactForm">
  <input type="text" id="nameContainer" placeholder="Name">
  <br>
  <br>
  <input type="email" id="emailContainer" placeholder="Email Address">
   
  <br>
  <br>
  <input type="text" id="messageContainer" placeholder="Message">
   
  <br>
  <br>
  <input type="submit" value="Send Message">
  </form>
  
 </div>
 
</div>

<div class="footer">
  <h2>Footer</h2>
  
</div>

Answer 1

负边距和高度把事情搞砸了。有那个高度和负边距的原因是什么？

#contactus {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

#formContainer {
  width: 85%;
  margin: 0 auto;
  background-color: aqua;
}

.contactHead {
  text-align: center
}

.footer {
  height: 250px;
  background-color: #1e1e1e;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer h2 {
  color: #fff;
}

<div id="contactus">

  <div id="formContainer">
    <h1 class="contactHead">Get In Touch!</h1>
    <h4 class="contactHead">I will be with you within 24 hours</h4>

    <form id="contactForm">
      <input type="text" id="nameContainer" placeholder="Name">
      <br>
      <br>
      <input type="email" id="emailContainer" placeholder="Email Address">

      <br>
      <br>
      <input type="text" id="messageContainer" placeholder="Message">

      <br>
      <br>
      <input type="submit" value="Send Message">
    </form>

  </div>

</div>

<div class="footer">
  <h2>Footer</h2>

</div>

联系表 Div 与页脚重叠

Contact Form Div Is Overlapping Footer

css

contact-form

overlapping