@deSoul

Адаптивный Резиновый Кроссбраузерный CSS дизайн на FLEX. Почему Chrome отображает не правильно?

Добрый день! Не могу разобраться с проблемой.
Я создал простую адаптивную верстку. Смысл ее в том, чтобы внутри основного блока с контентом, снизу всегда был "прибит" footer, независимо от заполненности блока контента.
Я реализовал с помощью технологии flex, и, в случае, если блок контента пуст, footer отображается корректно в Firefox, IE. Но при открытии через chrome, он "проваливается" ниже (не прилипает к нижнему краю окна браузера), примерно на высоту блока Header. Никак не могу найти причину, пожалуйста подскажите что не так с Chrome.
p.s. Пожалуйста не надо никаких Абсолютных позиционирований, я от них ухожу в данной реализации.
p.p.s. Пример кода на jsfiddle: https://jsfiddle.net/xma80x2r/1/
p.p.p.s. Скриншоты из

Firefox:
59d4899d9b0c410883c772d9bb2b81a8.png
IE:
aa30ffbe22e64723a07042cf00ef7aa1.png
Chrome:
9295b563a9b2425d8ac96be32d588c90.png
  • Вопрос задан
  • 1421 просмотр
Пригласить эксперта
Ответы на вопрос 4
dom1n1k
@dom1n1k
Вообще всё неправильно сверстано. Странно скорее, что оно работает нормально в FF, чем то, что оно глючит в Chrome. По мне, оно не должно работать нигде.

Почему все блоки .flexColumnBlock имеют height: 100%? Высота там нужна только для самого внешнего контейнера. Дальше про width и height нужно забыть и пользоваться только flex-basis, flex-grow, flex-shrink.

В чем вообще смысл использования флекса при таком подходе, ну кроме того, что это модное словечко? Зачем там 2 попеременно показываемых сайдбара вместо манипуляций со свойством order? Если уже переходить на flex-верстку, то нужно принимать и использовать её идеологию, а не усердно грести против течения. Мне кажется, вы её (идеологию) пока не понимаете - почитайте теорию. Либо используйте абсолютное позиционирование, оно проще (я серьезно).
Ответ написан
Комментировать
abyrkov
@abyrkov
JavaScripter
Ну почему нельзя абсолютное??? Легко же с ним!
position: absolute;
bottom: 0;
left: 0;

Если без него, то только с JS
Ответ написан
Комментировать
Carduelis
@Carduelis
Web-developer, front-end, js, less
Ну уезжает футер ровно на высоту header, кажется, надо от этого "плясать"
Ответ написан
Комментировать
Deeepi
@Deeepi
наверно header calc в помощь
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы