Задать вопрос
@Byrnane
Фронтенд-разработчик, начинающий гейм-дизайнер

Футер с помощью flexbox?

Всем привет! Подскажите, кто может, в чем проблема. Сделал прилипание футера к низу страницы с помощью флексбоксов:

body{
	display: flex;
	height: 100vh;
	flex-direction: column;
}
.layout {
	width: 100%;
	flex: 1 0 auto;
}
footer{
	width: 100%;
	height: 150px;
}


В разметке соответственно лэйаут и футер расположены по соседству. Если лэйаут пустой или для него не указана высота, то футер стоит на месте, прижат к низу страницы. Но стоит добавить контент, как футер (сам блок, с фоном и прочими) уезжает вниз за пределы вьюпорта, причем все содержимое футера остается на месте.

Upd. При уменьшении масштаба до 50% и меньше футер появляется на месте.
  • Вопрос задан
  • 5108 просмотров
Подписаться 3 Оценить Комментировать
Решения вопроса 1
@Byrnane Автор вопроса
Фронтенд-разработчик, начинающий гейм-дизайнер
Нашел у себя ошибку - в body нужно указать min-height: 100vh вместо height

И новый вопрос - как заставить это работать в ИЕ? :)
В нем флексбоксы конфликтуют с min-height...

Может знает кто?
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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