Исправлен нижний колонтитул внизу

Question

Итак, я делаю мобильную версию моей будущей страницы портфолио, и хочу иметь фиксированный нижний колонтитул на мобильном телефоне (ширина < 500 пикселей). Проблема в том, что по какой-то причине position: fixed; bottom: 0; не работает для меня. Вот скрипку:

https://jsfiddle.net/Skidle/metrLo1h/

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>