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

Answer 2

相信我你会随着时间的推移而变得更好，但我想，为了达到你想要的效果，你可以简单地设置一个像这样的自定义身体背景颜色

body {background-color: lightgray;}

你应该很好

为什么这个div完全坏了？

2 个答案: