Подписка
Все курсы
РегистрацияВход
/
Вопросы и ответы
/
CSS
/

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

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

4 года назад

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

Ответы

0

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

Исходный 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 ;
}

4 года назад

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

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

Хекслет

О насОтзывыСправкаБлогВопросы и ответыГлоссарийКарта сайта

Направления

ПрограммированиеИИАналитикаDevOpsТестированиеФронтендБэкенд

Профессии

Python-разработчик Фронтенд-разработчикJava-разработчикИнженер по ручному тестированиюDevOps-инженер с нуляРНР-разработчикGo-разработчикАналитик данныхAI-автоматизацияИИ для разработчиков

Навыки

Spring BootDockerTypescriptLaravelDjangoReactВеб-разработка на ExpressPostmanREST API в Node.js

support@hexlet.io

t.me/hexlet_help_bot

RU

ENKZ
+7 800 100 22 47

бесплатно по РФ

+7 495 085 21 62

бесплатно по Москве

Правовая информацияОфертаЛицензияКонтакты
108813 г. Москва, вн.тер.г. поселение Московский,
г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3
ОГРН 1217300010476
ИНН 7325174845