html - 重叠的 div 元素
问题描述
这些天我正在制作自己的作品集,我想在上面添加一个联系表格。我试过了,但 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
解决方案
检查这个是否有帮助。
您的图像未加载。
#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>
推荐阅读
- parsing - 解析语句并向它们添加括号
- php - 内置服务器将我的链接重定向到根
- spring-boot - 带有 null 的子句中的 JPA 本机查询
- html - Bootstrap 5 切换器未在移动视图中显示和工作
- python - 'DataFrame' 对象没有属性 'buy'
- python - Python - 基于多个条件和空检查的 Pandas 新 DF 列
- css - 试图去除颜色:继承;React 中的属性
- r - 带有 R Shiny 的 MongoDB 接口
- reactjs - 允许手风琴一次只打开一个
- python - conversion from PDF to TIFF does not work