Почему прижатие футера к низу с помощью флекса может не работать?

Question

[parnasmi]

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

Answer 1

[Егор Живагин]

У body высота auto по дефолту. Можно поставить min-height: 100vh и всё заработает, например.

А можно просто заполнить сайт контентом и всё будет хорошо)

Comments

[parnasmi]

Спасибо. Но это не помогает. Можете сами убедиться. Devtools в помощь.

[Сергей delphinpro]

parnasmi: Никогда не трогайте body. Максимум - фон и шрифты, но не раскладка.
Сделайте враппер, заверните в него весь сайт, и колдуйте дальше. Мне сейчас лень аргументировать, просто поверьте моему опыту...

Пример с прижатием подвала флексами очень прост - https://jsfiddle.net/8r81btmp/
Однако нужно помнить, что в IE11 работать не будет из-за бага в браузере. Баг исправлен только в Edge.

[parnasmi]

Сергей: Спасибо! Так и буду делать.

Answer 2

[parnasmi]

Обнаружил что, все из-за блока nav.main-menu. Если его удалить, тогда все нормально. Не понимаю, почему так происходить. Вот гифка
Update. Внутри .mani-menu есть вложенный блок .main-menu__inner который позиционирован абсолютно. Если убрать position:absolute пустое место под футером исчезает и все становиться нормально. Как это может влиять?

Answer 3

[Глюкъ Виртуален]

Не absolute, а fixed вы хотели сказать?
И это... флекс не предназначен для вашей задачи.