这些天,我正在制作自己的作品集,我想在其中添加联系表格。我尝试了,但是div像这样重叠到页脚。谁能帮我解决这个问题?非常感谢。
#contactus {height: 105vh; margin:0 auto;}
#formContainer{ width: 85%; margin: 0 auto; background-color: aqua; }
.contactHead{ text-align: center}
<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>
fV.png
答案 0 :(得分:0)
请检查是否有帮助。
您的图片未加载。
#contactus {
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>