https://yosofya.github.io/portfolio-V2.2/index.html
在我网站的附加链接中。我需要页脚位于“联系人”和“关于”页面中移动/iPhone 屏幕的底部。它在我的 PC 屏幕上看起来不错，但在我的 iPhone 上却没有。
我尝试了@media (max-width)，然后增加了 main-footer 的上边距以将其向下推，但是没有用。我将包括联系页面的代码。
HTML :
<div class="contact-title">
<h1> class="animated fadeInUp">Contact Me</h1>
<p> Make sure you provide me with all of the information in case you
want my help with your project. </p> <br>
<p>I will be glad to reply as soon as possible. </p>
</div>
<form class="contact-form" action="mailto:[email protected]" method="post" enctype="text/plain">
<input class="form-inputs" type="text" name="Name" size="50" placeholder="Your Name"> <br>
<input class="form-inputs" type="email" name="Email" size="50" placeholder="Your Email"> <br>
<textarea class="form-textarea" name="Meesage" rows="8" cols="52" placeholder="Your Message"></textarea> <br>
<button class="form-button" type="submit" value="Send">Submit</button>
</form>
</div>
CSS：
.contact-title h1 {
font-size: 7rem;
margin-bottom: 20px;
}
.contact-title p {
margin: 2px 0;
}
.contact-form {
margin-top: 100px;
}
@media (max-width:600px) {
.main-footer { margin-top:600px;}
}
.main-footer p {
padding-bottom: 100px;
letter-spacing: 7px;
margin: 0;
}
请将以下内容添加到您的 style.css 中：
@media (orientation:portrait) and (min-height: 1080px){
body, html{
margin:0;
height:100%;
}
}
@media (orientation:portrait) and (min-height: 1080px){
.container-fluid {
height: 100%;
}
}
@media (orientation:portrait) and (min-height: 1080px){
.main-footer.sticky-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
}
@media (orientation:portrait) and (min-height: 1080px){
.contact-background {
height: 100%;
}
}
然后，将类“sticky-bottom”添加到 about.html 和 contact.html：
<div class="main-footer sticky-bottom">
这应该被评论或删除：
/* @media (max-width:600px) {
.main-footer { margin-top:600px;}
} */
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句