html - 删除页脚后的多余空间

Question

页脚下方有大量额外空间。它与 body 的颜色相同。一切都很好，直到我添加了一个带有小联系信息的 div 并将其对齐到我的联系表格的右侧。

在我重新定位它之前，div 最初所在的联系表单下方似乎还有额外的空间。只有那个额外的空间已经重新定位在页脚下方，我已经尝试了一切，比如弄乱边距/ body 的高度，将接触部分包裹在容器内，并以更多的边距做更多的事情......在这一点上我不知道该怎么做。我在 Bootstrap html/css 中工作。

#contact {
  background-color: #696969;
  height: 750px;
}

#con {
  text-align: center;
  color: #E1E1E1;
  padding: 80px 0 80px 0;
}

#con::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 50%;
  padding-bottom: 10px;
  border-bottom: 3px solid #E1E1E1;
}

form {
  height: 100%;
  margin-left: 40px;
}

input[type="text"],
input[type="email"],
textarea {
  display: flex;
  border-radius: 5px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: #2CEAA3;
  background: #E1E1E1;
  outline-color: #2CEAA3;
  font-size: 24px;
  color: #4E0250;
}

input,
textarea {
  margin: 20px;
  max-width: 350px;
}

input {
  max-width: 250px;
}

input[type=submit] {
  color: #4E0250;
  font-size: 24px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.placeholder::placeholder {
  color: #4E0250;
  font-size: 25px;
  opacity: .50;
}

#conmsg {
  text-align: justify;
  position: relative;
  display: inline-block;
  max-width: 400px;
  font-size: 1.64em;
  color: #E1E1E1;
  left: 600px;
  bottom: 400px;
  line-height: 33px;
}

.footer {
  position: relative;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background: blue;
  text-align: center;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="contact">
  <h2 id="con">Contact Me</h2>

  <div id="form_content">
    <form>
      <input class="placeholder" type="text" name="name" placeholder="Wenyu Smile" />
      <input class="placeholder" type="text" name="phone" placeholder="412-218-4444" />
      <input class="placeholder" type="text" name="email" placeholder="ismile@gmail.com" />
      <textarea class="placeholder" name="message" placeholder="Great portfolio, let's talk soon!"></textarea>
      <input class="value" type="submit" name="send" value="Message Me" />
    </form>
  </div>
  <div id="conmsg">Drop me a line and share what's on your mind. Thinking of adding a reliable, new edition to your team? Have advice on how to improve my page? Maybe you'd enjoy a stimulating conversation on Quantum Physics and the interconnectedness of all life? Or
    perhaps you're in search of great food and drink around the city. Oh yes, I can help with that too. Either way, I look forward to hearing from you soon.</div>
</div>
<!--end contact-->
<div class="footer">Footer Text</div>

Answer 1

您在#contact div 上设置了明确的高度。删除它:

#contact {
    background-color: #696969;
    /* height: 750px; */
}