联系表与整个页脚重叠。我在Codepen上运行了代码，它的工作正常。样式表已连接并且可以正常工作，因此除联系表单外，所有其他样式都可以工作，我尝试重新定位填充，底部等，但是没有任何作用。
任何人都可以在代码中看到任何错误吗？还是有人可以建议我要解决的问题？
<!-- second container-->
<div class="container-fluid" id="jumbotron2">
<div class="row">
<div class="col-lg-12">
<div class="card-deck">
<div class="card text-center mb-3">
<div class="card-body text-dark">
<h1 class="card-title text-warning">Web Services</h1><br>
<p class="card-text"> I make custom websites tailored to your needs for
the following:
<ul class="text-left">
<li>E-commerce</li>
<li>Social media sites</li>
<li>Blog sites</li>
<li>Online business brochures</li>
<li>Self-employed and</li>
<li>Companies</li>
</ul>
<!--
<a href="website.html" role="button"class="btn btn-warning">more information</a
-->
</div>
</div>
<div class="card text-center mb-3">
<div class="card-body text-dark">
<h2 class="card-title text-warning">IT distance support</h2><br>
<p class="card-text">
Virtual machines and servers, active directory, windows server 2012
<ul class="text-left">
<li>Create & manage user accounts</li>
<li>Group policy management</li>
<li>Install and configure</li>
<li>Manager server roles</li>
<li>Manage server shares</li>
</ul>
<br><br>
<!--
<a href="re-design.html" role="button" class="btn btn-warning">more information</a>
-->
</div>
</div>
<div class="card text-center mb-3">
<div class="card-body text-dark">
<h2 class="card-title text-warning">Web Hosting</h2><br>
<p class="card-text">
Hosting your website live on the internet
<br>
<br>
<ul class="text-left">
<li>Reasonably priced hosting packages</li>
<li>guaranteed 99% uptime</li>
<li>fast page loading</li>
<li>unlimited storage</li>
</ul>
<!--
<a href="hosting.html" role="button" class="btn btn-warning">more
information</a>
-->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- contact form -->
<div class="container" id="contact">
<script src='https://www.google.com/recaptcha/api.js'>
</script>
<div class="form-row">
<div class="col-md-6 col-md-offset-3">
<h2>Contact me for a free quote</h2>
<p> Send your message in the form below and i will get back
to you as soon as possible. </p>
<br>
<p>Choose from the following :</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="inlineRadioOptions1" id="inlineRadio1" value="">
<label class="form-check-label"
for="inlineRadio1">New Website</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="inlineRadioOptions1" id="inlineRadio2" value="">
<label class="form-check-label"
for="inlineRadio2">IT Support</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="inlineRadioOptions1" id="inlineRadio3" value="">
<label class="form-check-label"
for="inlineRadio3">Website Hosting</label>
</div>
<form role="form" method="post">
<div class="form-group">
<label for="name"> Name:</label>
<input type="text" class="form-control" id="name"
name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="name"> address:</label>
<input type="text" class="form-control" id="address"
name="address" required maxlength="50">
</div>
<div class="form-group">
<label for="name"> phone:</label>
<input type="text" class="form-control" id="phone"
name="phone" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email"
name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="name"> Message:</label> <!--removed
type="textarea"-->
<textarea class="form-control" name="message"
id="message" placeholder="Your Message Here" maxlength="6000" rows="7">
</textarea>
</div>
<div class="g-recaptcha" data-
sitekey=""></div>
<button type="submit" class="btn btn-lg btn-warning
pull-right" id="btnContactUs">Post It! →</button>
</form>
<div id="success_message" style="width:100%; height:100%;
display:none; "> <h3>Sent your message successfully!</h3> </div>
<div id="error_message" style="width:100%; height:100%;
display:none; "> <h3>Error</h3> Sorry there was an error sending your
form.
</div>
</div>
</div>
</div>
#jumbotron {
padding-top: 50px;
height: 100px;
}
#jumbotron2 {
padding-top: 150px;
height: 300px;
margin-bottom: 250px;
}
#contact {
padding-top: 250px;
height: 500px;
margin-bottom: 250px;
}
答案 0 :(得分：0)
请删除在#contact {.....}类中设置的固定高度，如下所示。它与内部内容重叠或在其中添加“溢出：隐藏”。
#jumbotron {
padding-top: 50px;
height: 100px;
}
#jumbotron2 {
padding-top: 150px;
height: 300px;
margin-bottom: 250px;
}
#contact {
padding-top: 250px;
/* height: 500px; */
/* Remove this fixed height set to the container, it overlaps the inner content or add 'overflow: hidden' to it. */
margin-bottom: 250px;
}