移动端页面上推Footer主要内容

Question

我已经搜索了几个小时的修复程序。我很确定我没有正确使用它们。我尝试过使用包装器、负边距，甚至是 flex-grow 修复。我找不到任何东西来解决我的问题，所以我转向 Stack。在桌面宽度中，页脚停留在底部可能是因为内容没有增长到页脚位置以下。但是，当我将视口更改为较小的移动尺寸时，内容会增加并导致页脚上升。

html {
  font-size: 18px;
  box-sizing: border-box;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

a {
  text-decoration: none;
}

.width-container {
  width: 90%;
  margin: auto;
}


/* Nav Start */

nav {
  background-color: #4b34fa;
}

nav > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#nav-sub-container {
  width: 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#link-container {
  margin: 10px 0;
}

#nav-title {
  font-size: 1.5em;
  color: #fff;
}

.link {
  margin: 10px;
  font-size: 1.2em;
  color: #fff;
}

.link:hover {
  animation: link-hover 500ms forwards;
}

@keyframes link-hover {
  0% {
    font-size: 1.2em;
  }
  100% {
    font-size: 1.3em;
  }
}

#mail-icon > i {
  color: #fff;
}

/* Nav End */


/* Main Start */

main {
  height: 100%;
  max-height: 100%;
}

#hero-flex {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hero-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('/imgs/hero-img.jfif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .5;
  width: 100%;
  height: 100%;
}

#hero-container {
  position: relative;
  height: 50%;
  z-index: 1;
}

#hero-content > h1 {
  margin: 0;
  font-size: 1.5em;
  color: #000;
}
#hero-content > p {
  margin: 0;
  font-size: 1.2em;
}

#hero-content > h1 > span {
  animation: color-change 1s forwards;
}

@keyframes color-change {
  0% {
    color: #000;
  }
  100% {
    color: #4b34fa;
  }
}

#about-container {
  height: 50%;
}

#about-container > div { 
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

#about-container > div > div {
  padding: 10px;
}

#about-me > h3{
  margin: 10px 0;
  font-size: 1.3em;
}

#about-me > p {
  font-size: 1em;
}

#tech-icon-grid-container {
  height: 50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

#tech-icon-grid-container > p {
  margin: 10px;
  padding: 10px;
  justify-self: center;
  align-self: center;
  background-color: #4b34fa;
  color: #fff;
  border-radius: 10px 20px;
}

#tech-icon-grid-container > p:hover {
  background-color: #2b1aad;
  cursor: default;
}

.purplify {
  color: #4b34fa;
}

.purplify:hover {
  color: #2b1aad;
}
/* Main End */


/* Footer Start */

footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#social-icon-container {
  text-align: center;
}

.social-icon {
  margin: 0 5px;
  color: #4b34fa;
}

#social-icon-container > p {
  margin: 10px;
}

/* Footer End */

/* Media Query */

@media only screen and (max-width: 1300px) {
  
  #about-container > div {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Braden Hancock</title>

  <!-- CSS -->
  <link rel="stylesheet" href="./styles/main.css">
  <link rel="stylesheet" href="./styles/mobile.css">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

  <!-- Nav Start -->
  <nav>
    
    <div class="width-container">

      <a href="#"> <h1 id="nav-title">Braden Hancock</h1> </a>

      <div id="nav-sub-container">

        <div id="link-container">

          <a href="#" class="link"> My Work </a>
          <a href="#" class="link"> Blog </a>
          <a href="#" class="link"> Resume </a>
  
        </div>
    
        <a href="" id="mail-icon"> <i class="fas fa-paper-plane fa-2x"></i> </a>

      </div>

    </div>

  </nav>
  <!-- Nav End -->


  <!-- Main Start -->

  <main>

    <div id="hero-container">

      <div id="hero-bg"></div>

      <div class="width-container" id="hero-flex">

        <div id="hero-content">

          <h1>Hey I'm <span id="hero-color-fade">Braden</span> </h1>
          <p>Front-End Web Developer</p>

        </div>

      </div>

    </div>

    <div id="about-container">

      <div class="width-container">

        <div id="about-me">

            <h3>My Journey</h3>

            <p>In 2019, I recieved an email for a free trial of Codecademy Pro. I decided to give it a try, and I was amazed by how straight forward it was. Boy was I in for a surprise. I managed to gain a strong understanding of HTML and a basic understanding of CSS in my one month trial. I moved on to using other resources, mostly Google and Youtube when my trial ran out. Throughout the next few months I really started to get familiar with CSS, but I got bored. This is when I took my first look at JavaScript. It was very alien compared to HTML and CSS. The syntax was completely different from anything I had ever seen before, and the material was a lot harder to comprehend. Upon doing some further research I decided to buy a course on Udemy. This course advertised to take you from, "Zero to Hero". I spent a few months studying this course and completing small projects. This course was really good for learning the fundamentals of things like, functions, loops, arrays, objects, and classes. When I completed the course I decided to start putting what I had learned to use with projects that weren't prepared for me. This was when I began having to learn how to search for the answers I needed. I learned how to use Whosebugs' search engine and began participating with the community. For me, learning how to search and find the information I'm looking for has been one of the most impactful things I've learned. I have worked with a few other programming languages briefly, and I must say JavaScript is my favorite. I love being able to switch from front-end to back-end work so easily, and it has quite a few frameworks I'm very fond of.</p>

        </div>

        <div id="tech">

          <h3>Tech I Often Use</h3>

            <div id="tech-icon-grid-container">

              <p>HTML</p>
              <p>CSS</p>
              <p>SCSS</p>
              <p>JavaScript</p>
              <p>NodeJS</p>
              <p>ReactJS</p>
              <p>Jest</p>
              <p>Git</p>

          </div>

          <div id="tech-writeup">

            <p>Above I listed a few languages I enjoy using. I didn't include any frameworks because there are so many it would cover this page in icons. A few of my favorites however are, <span class="purplify">Express</span>, <span class="purplify">Axios</span>, <span class="purplify">Cheerio</span>, <span class="purplify">EJS</span>, <span class="purplify">Handlebars</span>, and <span class="purplify">Mongoose</span>.</p>

          </div>

        </div>

      </div>

    </div>
    
  </main>

  <!-- Main End -->


  <!-- Footer Start -->

<footer>

  <div id="social-icon-container">

    <a href="#" class="social-icon" id="facebook-icon"> <i class="fab fa-facebook-f"></i> </a>
    <a href="#" class="social-icon" id="twitter-icon"> <i class="fab fa-twitter"></i> </a>
    <a href="#" class="social-icon" id="github-icon"> <i class="fab fa-github-alt"></i> </a>
    
    <p>&copy; 2021 Braden Hancock</p>

  </div>


</footer>

  <!-- Footer End -->


  <!-- JavaScript -->
<script src="./js/app.js"></script>

  <!-- Font Awesome Kit -->
<script src="https://kit.fontawesome.com/2293124854.js" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

将height: 100vh替换为min-height: 100vh，在body的css中：

body {
  ...
  min-height: 100vh;
}

移动端页面上推Footer主要内容

Main content of page pushing Footer up in mobile

html

css

grid

footer