Липкий нижний колонтитул с display: flex
Решение на основе липкого нижнего колонтитула Филиппа Уолтона .
Объяснение
Это решение действительно только для :
- Chrome ≥ 21,0
- Firefox ≥ 20,0
- Internet Explorer ≥ 10
- Safari ≥ 6,1
Он основан на flex отображении , используя свойство flex-grow, которое позволяет элементу расти в высота или width (когда для flow-direction установлено значение column или row соответственно), чтобы занять дополнительное пространство в контейнере.
Мы собираемся использовать также подразделение vh, где 1vh равно , определенное как :
1/100 высоты окна просмотра
Поэтому высота 100vh - это краткий способ указать элементу, чтобы он охватывал всю высоту области просмотра.
Вот как вы бы структурировали свою веб-страницу:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
Чтобы нижний колонтитул прилипал к нижней части страницы, необходимо, чтобы пространство между телом и нижним колонтитулом увеличивалось настолько, насколько необходимо, чтобы толкнуть нижний колонтитул внизу страницы.
Поэтому наш макет становится:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
Осуществление
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}
<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>
Вы можете играть с ним на JSFiddle .
Причуды Сафари
Имейте в виду, что в Safari имеется некорректная реализация свойства flex-shrink , которое позволяет элементам сжиматься больше минимальной высоты, необходимой для отображения содержимого.
Чтобы решить эту проблему, вам необходимо явно установить для свойства flex-shrink значение 0, равное .content и footer в приведенном выше примере:
.content { flex-shrink: 0; }
.footer { flex-shrink: 0; }