如何在不同的屏幕尺寸上调整页脚

Question

https://yosofya.github.io/portfolio-V2.2/index.html

在我网站的附件link中。我需要将页脚放在联系人和关于页面中 Mobile/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:designist.joey@gmail.com" 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;
 }

Answer 1

试试这个。

@media (max-width: 600px) {
  .main-footer {
     margin-top: 0px;
 }
}

Answer 2

请将以下内容添加到您的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%;
    }
}

然后，将 class 'sticky-bottom' 添加到 about.html 和 contact.html:

<div class="main-footer sticky-bottom">

这应该被评论或删除：

/* @media (max-width:600px) {

.main-footer { margin-top:600px;}

} */

如何在不同的屏幕尺寸上调整页脚

how to adjust the footer on different screen sizes

html

css

responsive