联系人表格分区是重叠页脚。
联系人表格分区是重叠页脚。
提问于 2019-03-16 09:58:27
我正在制作我自己的投资组合，并想在上面添加一个联系表格。但是包含表单的div在小屏幕中将页脚重叠。通过运行代码段可以看出问题所在。有人能帮我解决这个问题吗？会有很大帮助的。非常感谢。
#contactus {
height: 105vh;
margin: 0 auto -80px;
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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-16 10:02:09
负的边际和高度使事情变得一团糟。有这么高和负边际的原因是什么？
#contactus {
margin: 0 auto;
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55195486
复制相关文章
相似问题
腾讯云开发者
