display: flex
Решение, вдохновленное липким нижним колонтитулом Филиппа Уолтона .
Это решение является действительным только для :
Он основан на дисплее flex
, используя свойство flex-grow
, которое позволяет элементу расти как по высоте, так и по ширине (когда 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; }
Hello World!Вы можете играть с ним в JSFiddle .
Прикиды Safari
Имейте в виду, что Safari имеет ошибочную реализацию
flex-shrink
свойство , которое позволяет деталям сжиматься больше минимальной высоты, необходимой для отображения содержимого. Чтобы исправить эту проблему, вам необходимо будет установить свойствоflex-shrink
явно 0 в.content
иfooter
в приведенном выше примере:.content { flex-shrink: 0; } .footer { flex-shrink: 0; }
Перезагрузите машину и попробуйте, возможно, вы решите свою проблему.
Как отметил Говинд в комментариях. Перезагрузка машины может помочь, в моем случае это помогло.