Question

所以我正在做我未来投资组合页面的移动版本，我希望在移动设备上有一个固定的页脚（宽度<500px）。问题是由于某种原因position: fixed; bottom: 0;对我不起作用。这是一个小提琴：

Answer 1

您在默认样式中设置top: 18em：

aside {
    position: fixed;
    top: 18em;
    ...
}

您需要使用top: auto;

在媒体查询中覆盖此内容

@media all and (max-width: 500px) {
    aside {
        position: fixed;
        border-radius: 0;
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 3em;
    }
}

示例：

* {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Navigation */
nav {
  background-color: #2A4543;
  color: #FBFAF8;
  box-shadow: 0 0 0.75em #4F5052;
  position: fixed;
  width: 100%;
  height: 4em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

nav ul {
  display: flex;
  flex-flow: row nowrap;  
  font-size: 1.625em;
}

nav a {
  display: block;
  padding: 0 6em;
}

.wrapper {
  padding-top: 4em;
  background-color: #EBF1F4;
  display: flex;
  width: 100%;
}

main {
  width: 85%;
  margin: auto;
}

header {
  background-color: #FBFAF8;
  box-shadow: 0 0 0.75em #4F5052;
  color: #475148;
  display: flex;
  height: 20em;
  justify-content: center;
  align-items: center;
  text-align: center;
}

header .about {
  width: 35em;
  height: 7em;
  padding: 1em 0;
}

header h1 {
  text-transform: uppercase;
  font-size: 3.250em;
  letter-spacing: 0.125em;
  padding-bottom: 0.125em;
}

header hr {
  width: 20em;
  background-color: #475148;
  margin: 0 auto;
  height: 1px;
  padding: 0;
  border: 0;
}

header h2 {
  font-size: 1.5em;
  letter-spacing: 0.125em;
  padding-top: 0.250em;
  margin: 0 auto;
}

section {
  background-color: #2D3441;
  box-shadow: 0 0 0.75em #4F5052;
  clear: both;
  padding: 2em 4em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

section img {
  padding: 3em 0;
}

a {
  color: #FBFAF8;
  text-decoration: none;
}

a:link {
  text-decoration: none;
  color: #FBFAF8;
}

a:visited {
  text-decoration: none;
  color: #FBFAF8;
}

nav a:active {
  text-decoration: none;
  color: #E49273;
}

nav a:hover {
  text-decoration: none;
  color: #E49273;
}

aside {
  position: fixed;
  top: 18em;
  left: 0.625em;
  background-color: #984447;
  border-radius: 0.375em;
  color: #FBFAF8;
  width: 4.5em;
  height: 12em;
  display: flex;
  align-items: center;
  justify-content: center;
}

aside a:active {
  text-decoration: none;
  color: #CEB5A7;
}

aside a:hover {
  text-decoration: none;
  color: #CEB5A7;
}

i {
  padding: 0.375em 0;
} 

@media all and (max-width: 350px) {
  nav {
    font-size: 0.875em;
    height: 4.5em;
  }
  
  header h1{
    font-size: 3em;
  }
}
  
@media all and (max-width: 500px) {
  body {
    font-size: 75%;
  }
  
  nav {
    justify-content: center;
  }
  
  nav a {
    padding: 0 1em;
  }
  
  .wrapper {
    width: 100%;
    height: 100%;
  }
  
  main {
    width: 85%;
  }
  
  header {
    font-size: 65%;
    height: 18em;
  }
  
  section img {
    padding: 1em 0;
    width: 100%;
    height: auto;
  }
  
  section {
    padding: 2em 2.5em;
  }

  aside {
    position: fixed;
    border-radius: 0;
    left: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 3em;
}
  aside ul {
    display: flex;
    flex-flow: row nowrap;
  }
  
  i {
    padding: 0.25em 0.5em;
  }
}

<script src="https://use.fontawesome.com/95380c6d63.js"></script>
  <body>
    <!-- Navigation -->
    <nav>
      <ul>
        <li><a href="#"><h1>About</h1></a></li>
        <li><a href="#"><h1>Portfolio</h1></a></li>
        <li><a href="#"><h1>Blog</h1></a></li>
      </ul>
    </nav>

    <div class="wrapper">
      <main>
        <!-- About -->
        <header>
          <div class="about">
            <h1>Daria Doronina</h1>
            <hr>
            <h2>Front-End Web Developer</h2>
          </div>
        </header>

        <!-- Portolio -->
        <section>
          <a href="#">
            <img src="http://placehold.it/400x300" alt="Tribute page">
          </a>
          <a href="#">
            <img src="http://placehold.it/400x300" alt="Portfolio page">
          </a>

          <a href="#">
            <img src="http://placehold.it/400x300" alt="Cartoon page">
          </a>

          <a href="#">
            <img src="http://placehold.it/400x300" alt="My Portfolio">
          </a>
        </section>
      </main>
    </div><!-- close wrapper -->
      
    <!-- Contacts -->
    <aside>
      <ul>
        <li>
          <a href="mailto:skidle.dd@gmail.com" title="Send me an email">
            <i class="fa email fa-envelope-o fa-2x" aria-hidden="true"></i>
          </a>
        </li>
        <li>
          <a href="https://github.com/Skidle/skidle.github.io/blob/master/CV.pdf?raw=true" target="_blank" title="My CV in PDF format">
            <i class="fa cv fa-address-card-o fa-2x" aria-hidden="true"></i>
          </a>
        </li>
        <li>
          <a href="#" target="_blank" title="My FreeCodeCamp.com profile">
            <i class="fa fcc fa-free-code-camp fa-2x" aria-hidden="true"></i>
          </a>
        </li>
      </ul>
    </aside>
      
  </body>

固定页脚不在底部

1 个答案: