Как привязать футер к низу страницы css

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Существует несколько способов, позволяющих решить данную проблему. Рассмотрим некоторые из них.

Исходный HTML файл:

<html>
<body>
<!-- Основной блок (обёртка) -->	
<div class="wrapper">
  <!-- Блок с контентом -->	
  <div class="content">i am content</div>
  <!-- Футер -->	
  <div class="footer">I am footer</div>
</div>
</body>
</html>

Пример №1. Footer документа прижимается к низу с помощью фиксированного позиционирования.

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  /* Добавим цвет и ширину блока для наглядности*/
  background-color: #444;
  width: 100%;
}

Пример №2. C помощью Flex. Обратите внимание что классу обертке необходимо будет задать высоту.

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

Пример №3. С помощью Grid. У обертки так же задается высота.

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto ;
}

3 года назад

Вячеслав Межуревский

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Анимация CSS

Навык создания анимаций в CSS для улучшения пользовательского опыта и повышения востребованности на рынке

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

Похожие вопросы