gpt4 book ai didi

css - 联系表格 Div 与页脚重叠

转载 作者:行者123 更新时间:2023-11-28 00:14:28 25 4
gpt4 key购买 nike

我正在制作自己的作品集,想在上面添加一个联系表。但是包含表单的 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>

最佳答案

负边距和高度把事情搞砸了。有那个高度和负边距的原因是什么?

#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>

关于css - 联系表格 Div 与页脚重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55195486/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com