Липкий нижний колонтитул с display: flex

Решение, вдохновленное липким нижним колонтитулом Филиппа Уолтона .

Объяснение

Это решение является действительным только для :

• Chrome ≥ 21.0
• Firefox ≥ 20.0
• Internet Explorer ≥ 10
• Safari ≥ 6.1

Он основан на дисплее flex , используя свойство flex-grow, которое позволяет элементу расти как по высоте, так и по ширине (когда flow-direction установлен на column или row соответственно), чтобы занять дополнительный пространство в контейнере.

Мы будем использовать также блок vh, где 1vh - , определенный как :

1 / 100-я высота окна просмотра

blockquote>

Поэтому высота 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; }