Липкий нижний колонтитул с дисплеем : flex

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

Объяснение

Это решение допустимо только для :

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

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

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

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

Поэтому высота 100vh - это краткое описание того, как элемент должен охватывать всю высоту видового экрана.

Вот как вы бы структурировали свою веб-страницу:

  ----------- тело ----------- ----------------------  ------ ---------- нижний колонтитул ---------- -----------  -----------------  

Для того, чтобы нижний колонтитул касался нижней части страницы, вам нужно пространство между телом и

Поэтому наш макет будет выглядеть следующим образом:

  --------  --- body ----------- ---------------------------- -------  --- spacer ---------- & lt; - Этот элемент должен расти в высоту ---------------------------  - ---------- нижний колонтитул ---------- ----------------------------   

Реализация

body {margin: 0; дисплей: flex; flex-direction: column; min-height: 100vh; } .spacer {flex: 1; } / * сделать его видимым для целей демонстрации * / .footer {height: 50px; background-color: red; } & lt; body & gt; & lt; div class = "content" & gt; Hello World! & lt; / div & gt; & lt; div class = "spacer" & gt; & lt; / div & gt; & lt; footer class = "footer" & gt; & lt; / footer & gt; & lt; / body & gt;

Вы можете сыграть с ним в JSFiddle .

Призраки Safari

Имейте в виду, что Safari имеет ошибочную реализацию свойства flex-shrink , который позволяет деталям сжиматься больше минимальной высоты, необходимой для отображения содержимого. Чтобы исправить эту проблему, вам необходимо будет установить свойство flex-shrink явно в 0 в .content и нижний колонтитул в приведенном выше примере:

  .content {flex-shrink: 0;  } .footer {flex-shrink: 0;  }