Комментарии 12
не работает, если в боди много контента, то футер уезжает за экран вниз
Суть данного способа в том, чтобы удерживать футер внизу экрана, если содержимого недостаточно.
При его избытке футер и должен смещаться
При его избытке футер и должен смещаться
С чего это вы решили стричь всех под одну гребенку? Мне удобно когда футер зафиксирован внизу и виден всегда. Элементарно когда мне присылают скрин я вижу версию и среду на которой возникла проблема. Банковский сектор если что.
Пользователь написал:
Когда я в ответ писал «футер и должен смещаться», имел в виду, что такое поведение и предусмотренно в подходе, описанном в этой заметке.
Я не пытался утверждать, что это концепция, которой должны все придерживаться.
не работает, если в боди много контента, то футер уезжает за экран вниз
Когда я в ответ писал «футер и должен смещаться», имел в виду, что такое поведение и предусмотренно в подходе, описанном в этой заметке.
Я не пытался утверждать, что это концепция, которой должны все придерживаться.
Вот решение:
jsfiddle.net/zbjsr6wv/2
Для расположения содержимого по центру, если его мало — класс centered
Для проматывания содержимого, если его много, с оставлением футера — scrollable
Если какого-то поведения не нужно — убираешь соответствующий класс и всё.
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;
}
-----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%; }На каком основании и с какой целью Вы делаете подобные заявления?
Поддержка IE 9+ и 95% по Caniuse: caniuse.com/#feat=mdn-css_types_length_vh
Поддержка IE 9+ и 95% по Caniuse: caniuse.com/#feat=mdn-css_types_length_vh
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы