Как стать автором
Обновить

Комментарии 12

не работает, если в боди много контента, то футер уезжает за экран вниз

Суть данного способа в том, чтобы удерживать футер внизу экрана, если содержимого недостаточно.
При его избытке футер и должен смещаться
С чего это вы решили стричь всех под одну гребенку? Мне удобно когда футер зафиксирован внизу и виден всегда. Элементарно когда мне присылают скрин я вижу версию и среду на которой возникла проблема. Банковский сектор если что.
Пользователь написал:
не работает, если в боди много контента, то футер уезжает за экран вниз

Когда я в ответ писал «футер и должен смещаться», имел в виду, что такое поведение и предусмотренно в подходе, описанном в этой заметке.

Я не пытался утверждать, что это концепция, которой должны все придерживаться.
Вот решение:
jsfiddle.net/zbjsr6wv/2
Для расположения содержимого по центру, если его мало — класс centered
Для проматывания содержимого, если его много, с оставлением футера — scrollable
Если какого-то поведения не нужно — убираешь соответствующий класс и всё.
Проблема

В демонстрационном Codepen выше я добавила к элементу main свойство outline, чтобы продемонстрировать, что при использовании метода Flexbox, main не заполняет всю доступную высоту. Вот почему мы должны использовать именно трюк с margin-top: auto.

На самом деле достаточно использовать flex-grow: 1 на main, тогда "проблемы" не будет

Боюсь, я неправильно передал суть исходного смысла.
Возможно, стоило бы назвать это «особенностью».
В конце статьи автор указывает, что разные способы применимы в разных ситуациях.
Подумаю, можно ли заменить чем-то получше

Если есть идеи, можете предложить
Интересное решение. Но у меня есть свое, может кому пригодится.

-----HTML Разметка такая:-----
<-body>
<-div class=«wrapper»>

<-div class=«content»>

<-header class=«header»>

<-/header>

<-/div>

<-footer class=«footer»>

<-/footer>

<-/div>
<-/body>

------CSS код:------

html,
body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer{
flex: 0 0 auto;
}
Использование «vh» сильно ухудшает степень поддержки готового решения в браузерах (65-70%).
Если вместо
body { min-height: 100vh; }
использовать
html { height: 100%; }
body { min-height: 100%; }
то уровень поддержки увеличится до уровня поддержки flexbox-ов (85-99%).
На каком основании и с какой целью Вы делаете подобные заявления?
Поддержка IE 9+ и 95% по Caniuse: caniuse.com/#feat=mdn-css_types_length_vh
Да, ошибся. Смотрел Caniuse, но видимо зацепился не за тот блок.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории