Подвал прижатый к низу страницы

Пишу для себя, чтоб не забыть. Вечно вылетает из головы, как правильно прижать подвал к низу страницы 😉 На самом деле все просто. Создаем структуру html примерно такого вида:

<div class="wrap">
  
  Какой-то текст
      
</div>

<footer class="footer">
  подвал
</footer>

после добавляем css код:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrap {
  min-height: 100%;
  /* отступ равен высоте подвала */
  margin-bottom: -142px; 
}
.wrap:after {
  content: "";
  display: block;
}
.footer, .wrap:after {
  /* высота подвала */
  height: 142px; 
}
.footer {
  background: #000;
}
This entry was posted in CSS, Памятка and tagged , , . Bookmark the permalink.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*