Попытка применить липкий нижний колонтитул с мобильным первым подходом

Я пытаюсь применить липкий нижний колонтитул, но при медиа-запросе 769px он ломается (не останется внизу страницы). Я использую Mobile-First Approach, я не использую Boostrap Framework.

Нужно ли применять другие медиа-запросы до того, как нижний колонтитул залипнет? Я пытаюсь добавить нижний колонтитул в нижней части моей страницы.

Я что-то пропустил в своем медиа-запросе CSS для 769px или что-то не так в моем.main-footer в разделе "Контейнер макетов CSS" в разделе "Мои стили базового макета".

Я включил свой код. Спасибо за помощь!

/********************************
 BASE STYLE ELEMENTS
*********************************/
/** {
  border: 1px solid yellow;
}*/

* {
  box-sizing: border-box;
}

.home-page {
  background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #000;
  line-height: 1.6em;
  font-family: 'Merriweather', serif;
}

.name  {
  color:  #91bfdb;
  /*color: #9cb6d9;*/
  font-family: 'Tangerine', cursive;
}

.subname {
  color:  #91bfdb;
  /*color: #9cb6d9;*/
  font-family: 'Tangerine', cursive;

}

.p-header {
  /*color:  #e4d1a4;*/
  color: #9cb6d9;
  font-family: 'Tangerine', cursive;
}

a {
  color:  #e4d1a4;
  /*color: #7D715D;*/
  font-family: 'Merriweather', serif;
  text-decoration: none;

}

li {
  list-style: none;
}


/********************************
      BASE LAYOUT STYLES
*********************************/

/*----  NAVIGATION  ----*/

.name {
  font-size: 2em;
}

.name {
  margin-top: 87px;
  margin-left: 20px;
}

.subname {
  font-size: 2.45em;
  margin-top: 78px;
  padding-left: 32px;
}

/*.name,*/
.main-nav li {
  margin-top: 35px;
  margin-bottom: 2px;
  text-align: center;
}

.main-nav a {
  padding: 10px 10px;
  text-align: center;
  display: block;
}

.main-nav a:hover {
  color: yellow;
}

/*----  LAYOUT CONTAINERS ----*/

.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
  text-align: center;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  margin-bottom: 30px;
  overflow: hidden;
}

.main-footer {
  background: #cdd0d7;
  padding: 2em 0;
  text-align: center;
  height: 150px;

}

/*----  PAGE ELEMENTS ----*/

/*============================
        MEDIA QUERIES
==============================*/

@media (min-width: 769px) {

  .wrap {
    min-height: calc(100vh - 89px)
  }

  .container {
    width: 90%;
    max-width: 1150px;
    margin: 0 auto;;
  }

  .main-nav {
    float: right;
  }

  .main-nav li {
    float: left;
    margin-left: 5px;
  }

  .name {
    float: left;
  }

  .clearfix {
    content: "";
    display: table;
    clear: both;
  }
}
  

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-    scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>DevMagik</title>

          <link rel="stylesheet" href="css/normalize.css" />


          <link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
          <script src="https://use.fontawesome.com/0f50f445ba.js"></script>
        <link rel="stylesheet" href="css/styles.css">
  </head>
    <body class="home-page">

      <div class="wrap">
      <header class="main-header">
        <div class="container clearfix">
          <a href="index.html" class="name">
              <h1>Dev Magik</a></h1>


          <ul class="main-nav">
              <li><a href="about.html">About</a></li>
              <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
          <p class="subname">
          Web Development, Design, and Hosting</p>
      </header>
   </div> <!--End Wrapper-->

        <footer class="main-footer">

          <span>&copy; 2016 DevMagik/Andrea M.</span>
          <i class="fa fa-facebook-square" aria-hidden="true"></i>


          
        </footer>

    </body>
</html>

Источник

1 ответ

Переехать min-height из .wrap класс из медиа-запроса.

Вам нужна минимальная ширина при просмотре страницы на маленьком и большом экранах.

Как это:

...

.wrap {
  min-height: calc(100vh - 89px)
}

@media (min-width: 769px) {

  .container {
    width: 90%;
    max-width: 1150px;
    margin: 0 auto;
  }

...

Обратите внимание, что vh работает только в очень современных браузерах (IE >= 11, Firefox >= 50). Для получения подробной информации о совместимости см. эту ссылку: http://caniuse.com/.

Есть и другие способы заставить элемент прилипать ко дну, не используя calc а также vh, В этой статье описывается несколько способов сделать это: https://css-tricks.com/couple-takes-sticky-footer/

Один из них (называемый "Отрицательный край в нижнем колонтитуле" в статье выше) заключается в добавлении отрицательного поля в нижний колонтитул (равный высоте нижнего колонтитула) и нижнего отступа к элементу, который переносит содержимое над нижним колонтитулом (снова равным высота нижнего колонтитула):

Цитата из https://css-tricks.com/couple-takes-sticky-footer/: На нижних колонтитулах есть отрицательные поля

Этот метод не требовал использования элемента push, но вместо этого требовался дополнительный элемент обтекания вокруг содержимого (элемент обертки, в котором содержалось все, кроме нижнего колонтитула), к которому применялся соответствующий нижний отступ. Опять же, чтобы отрицательный запас не поднимал нижний колонтитул над любым содержимым

Что нужно изменить в вашем CSS, чтобы использовать эту технику:

...

.wrap {
  padding-bottom: 150px;
}

.main-footer {
  background: #cdd0d7;
  padding: 2em 0;
  text-align: center;
  height: 150px;
  margin-top: -150px;
}

...

Вот весь код (HTML такой же, как ваш):

/********************************
 BASE STYLE ELEMENTS
*********************************/
/** {
  border: 1px solid yellow;
}*/

* {
  box-sizing: border-box;
}

.home-page {
  background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #000;
  line-height: 1.6em;
  font-family: 'Merriweather', serif;
}

.name  {
  color:  #91bfdb;
  /*color: #9cb6d9;*/
  font-family: 'Tangerine', cursive;
}

.subname {
  color:  #91bfdb;
  /*color: #9cb6d9;*/
  font-family: 'Tangerine', cursive;

}

.p-header {
  /*color:  #e4d1a4;*/
  color: #9cb6d9;
  font-family: 'Tangerine', cursive;
}

a {
  color:  #e4d1a4;
  /*color: #7D715D;*/
  font-family: 'Merriweather', serif;
  text-decoration: none;

}

li {
  list-style: none;
}


/********************************
      BASE LAYOUT STYLES
*********************************/

/*----  NAVIGATION  ----*/

.name {
  font-size: 2em;
}

.name {
  margin-top: 87px;
  margin-left: 20px;
}

.subname {
  font-size: 2.45em;
  margin-top: 78px;
  padding-left: 32px;
}

/*.name,*/
.main-nav li {
  margin-top: 35px;
  margin-bottom: 2px;
  text-align: center;
}

.main-nav a {
  padding: 10px 10px;
  text-align: center;
  display: block;
}

.main-nav a:hover {
  color: yellow;
}

/*----  LAYOUT CONTAINERS ----*/

.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
  text-align: center;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  margin-bottom: 30px;
  overflow: hidden;
}

.wrap {
  padding-bottom: 150px;
}

.main-footer {
  background: #cdd0d7;
  padding: 2em 0;
  text-align: center;
  height: 150px;
  margin-top: -150px;
}

/*----  PAGE ELEMENTS ----*/

/*============================
        MEDIA QUERIES
==============================*/

@media (min-width: 769px) {

  .container {
    width: 90%;
    max-width: 1150px;
    margin: 0 auto;;
  }

  .main-nav {
    float: right;
  }

  .main-nav li {
    float: left;
    margin-left: 5px;
  }

  .name {
    float: left;
  }

  .clearfix {
    content: "";
    display: table;
    clear: both;
  }
}
  <!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-    scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>DevMagik</title>

      <link rel="stylesheet" href="css/normalize.css" />


      <link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
      <script src="https://use.fontawesome.com/0f50f445ba.js"></script>
    <link rel="stylesheet" href="css/styles.css">
  </head>
<body class="home-page">

  <div class="wrap">
  <header class="main-header">
    <div class="container clearfix">
      <a href="index.html" class="name">
          <h1>Dev Magik</a></h1>


      <ul class="main-nav">
          <li><a href="about.html">About</a></li>
          <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
      <p class="subname">
      Web Development, Design, and Hosting</p>
  </header>
   </div> <!--End Wrapper-->

    <footer class="main-footer">

      <span>&copy; 2016 DevMagik/Andrea M.</span>
      <i class="fa fa-facebook-square" aria-hidden="true"></i>


      
    </footer>

</body>
</html>

Источник
Другие вопросы по тегам