html - 为什么这个div完全坏了？

Question

我不知道这里发生了什么。在 div 中包含一个表单，并且 div 具有背景色。

它在我网站的一部分上有效，但在另一部分上根本不起作用。这是一个 Jsfiddle发生了什么事

受影响的代码也张贴在这里:

form {
  text-align: center;
}

input {
  font-family: 'Cabin', sans-serif;
}

.submit-button {
  text-decoration: none;
  width: 80%;
  background-color: white;
  text-align: center;
  height: 35px;
  border-radius: 10px;
  display: inline-block;

}

.input-half {
  width: 40%;
  display: inline-block;
  float: left;
  margin-left: 5%;
  margin-right: 5%;
}

.input-half-2 {
  width: 40%;
  display: inline-block;
  float: right;
  margin-left: 5%;
  margin-right: 5%;
}

input[type=text]:focus {
  background-color: lightblue;
}


.contact-contain {
  background-color: lightgray;
  max-width: 100%;
}

.image-back {
  width: 100%;
}

#back-img {
  width: 100%
}

.cont-textarea {
  resize: none;
  width: 80%;
  height: 110px;
}

<div class="contact-contain" id="link-c"><br>
  <h1>Contact Over The Horizon:</h1><br><br>
  <form>
    <div class="input-half">
      <label for="contname">Your Name</label><br>
      <input class="input-box" type="text" name="contname"><br>
      <label for="eaddress">Your Email</label><br>
      <input class="input-box" type="text" name="eaddress"><br>
      <label for="subj">Message Subject</label><br>
      <input class="input-box" type="text" name="subj">
    </div>
    <div class="input-half-2">
      <label for="contactmsg">Message Content</label><br><br>
      <textarea class="cont-textarea"></textarea><br><br>
      <button class="submit-button" type="submit" name="submitq" value="Send"><span>Submit Quote</span></button><br>
    </div>
  </form>
</div><br>

Answer 1

大胆的猜测:您希望您的 div 包含您的表单(高度为零)。这样做:

.contact-contain {
    overflow: hidden;
}

Demo