Sticky footers

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Шаблон нижнего колонтитула - это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. В этом рецепте мы рассмотрим несколько методов для создания одного из них.

A sticky footer pushed to the bottom of a box

Requirements

Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:
 

  • Нижний колонтитул прилипает к нижней части области просмотра, когда содержание короткое.
  • Если содержимое страницы выходит за нижнюю часть области просмотра, нижний колонтитул располагается ниже содержимого, как обычно.

The recipe

Note: In this example and the following one we are using a wrapper set to min-height: 100% in order that our live example works. You could also achieve this for a full page by setting a min-height of 100vh on the <body> and then using it as your grid container.

Выбор сделан

В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс .wrapper имеет минимальную высоту 100%, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку 1fr, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек 1fr будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.

Alternate method

If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.

The flexbox example starts out in the same way, but we use display:flex rather than display:grid on the .wrapper; we also set flex-direction to column. Then we set our main content to flex-grow: 1 and the other two elements to flex-shrink: 0 — this prevents them from shrinking smaller when content fills the main area.

Browser compatibility

grid-template-rows

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
grid-template-rowsChrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16
Полная поддержка 16
Нет поддержки 12 — 79
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -ms-grid-rows
Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10
Альтернативное имя
Полная поддержка 10
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -ms-grid-rows
Opera Полная поддержка 44
Полная поддержка 44
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
Animation of tracksChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 66IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 66Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
fit-content()Chrome Полная поддержка 29Edge Полная поддержка 16Firefox Полная поддержка 51IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 51Opera Android Полная поддержка 43Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
minmax()Chrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 44
Полная поддержка 44
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
repeat()Chrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 38
Отключено
Отключено From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16Firefox Частичная поддержка 57
Замечания
Частичная поддержка 57
Замечания
Замечания repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
Нет поддержки 52 — 57
Замечания
Замечания calc() doesn't work in repeat() (see bug 1350069).
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 44
Полная поддержка 44
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 38
Отключено
Отключено From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
subgridChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 71
Полная поддержка 71
Полная поддержка 69
Замечания Отключено
Замечания Enabled by default in Firefox Nightly.
Отключено From version 69: this feature is behind the layout.css.grid-template-subgrid-value.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Использует нестандартное имя.
Использует нестандартное имя.

flex-direction

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
flex-directionChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Частичная поддержка 20
Замечания
Частичная поддержка 20
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Замечания Does not support overflow when using *-reverse. See bug 1042151 for more info.
Нет поддержки 18 — 20
Отключено
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 11
Полная поддержка 11
Полная поддержка 10
С префиксом
С префиксом Требует вендорный префикс: -ms-
Opera Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Частичная поддержка 20
Замечания
Частичная поддержка 20
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Замечания Does not support overflow when using *-reverse. See bug 1042151 for more info.
Нет поддержки 18 — 20
Отключено
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 2.0
Полная поддержка 2.0
Полная поддержка 1.5
С префиксом
С префиксом Требует вендорный префикс: -webkit-

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

flex-grow

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
flex-growChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 22
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Нет поддержки 18 — 20
Отключено
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 11
Полная поддержка 11
Полная поддержка 10
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -ms-flex-positive
Opera Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Нет поддержки 18 — 20
Отключено
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 2.0
Полная поддержка 2.0
Полная поддержка 1.5
С префиксом
С префиксом Требует вендорный префикс: -webkit-
<0 animate
Нестандартная
Chrome Полная поддержка 49Edge Полная поддержка 79Firefox Полная поддержка 32
Замечания
Полная поддержка 32
Замечания
Замечания Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
IE Нет поддержки НетOpera Полная поддержка 36Safari Нет поддержки НетWebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 32
Замечания
Полная поддержка 32
Замечания
Замечания Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Opera Android Полная поддержка 36Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 5.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

flex-shrink

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
flex-shrinkChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 22
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Замечания Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Нет поддержки 18 — 20
Отключено
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.
Opera Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 8
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Since Firefox 28, multi-line flexbox is supported.
Замечания Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Нет поддержки 18 — 20
Отключено
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 8
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 2.0
Полная поддержка 2.0
Полная поддержка 1.5
С префиксом
С префиксом Требует вендорный префикс: -webkit-

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Resources on MDN