Web/CSS/Layout cookbook/Sticky footers

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height. We'll look at a couple of techniques for creating one in this recipe.

[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2018/09/23/16184/d69b43e533f622997d7a978c023c5e7a/cookbook-footer.png|A sticky footer pushed to the bottom of a box]]

Requirements

The Sticky footer pattern needs to meet the following requirements:

Footer sticks to the bottom of the viewport when content is short.
If the content of the page extends past the viewport bottom, the footer then sits below the content as normal.

The recipe

Download this example

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.

Choices made

In the above example we achieve the sticky footer using CSS Grid Layout. The .wrapper has a minimum height of 100% which means it is as tall as the container it is in. We then create a single column grid layout with three rows, one row for each part of our layout.

Grid auto-placement will place our items in source order and so the header goes into the first auto sized track, the main content into the 1fr track and the footer into the final auto sized track. The 1fr track will take up all available space and so grows to fill the gap.

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`grid-template-rows`	Chrome Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 16 Full support 16 No support 12 — 79 Alternate Name' Alternate Name' Uses the non-standard name: `-ms-grid-rows`	Firefox Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' 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 Full support 10 Alternate Name' Full support 10 Alternate Name' Alternate Name' Uses the non-standard name: `-ms-grid-rows`	Opera Full support 44 Full support 44 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' 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 Full support 43 Full support 43 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
Animation of tracks	Chrome No support No	Edge No support No	Firefox Full support 66	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 66	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`fit-content()`	Chrome Full support 29	Edge Full support 16	Firefox Full support 51	IE No support No	Opera Full support 44	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 51	Opera Android Full support 43	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
`minmax()`	Chrome Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 16	Firefox Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' 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 No support No	Opera Full support 44 Full support 44 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' 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 Full support 43 Full support 43 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
`repeat()`	Chrome Full support 57 Full support 57 Full support 38 Disabled' Disabled' From version 38: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 16	Firefox Partial support 57 Notes' Partial support 57 Notes' Notes' `repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see bug 1341507). No support 52 — 57 Notes' Notes' `calc()` doesn't work in `repeat()` (see bug 1350069). No support 40 — 59 Disabled' Disabled' 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 No support No	Opera Full support 44 Full support 44 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57 Full support 57 Full support 38 Disabled' Disabled' From version 38: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' 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 Full support 43 Full support 43 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
`subgrid`	Chrome No support No	Edge No support No	Firefox Full support 71 Full support 71 Full support 69 Notes' Disabled' Notes' Enabled by default in Firefox Nightly. Disabled' 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 No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
Partial support: Partial support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Uses a non-standard name.': Uses a non-standard name.

flex-direction

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`flex-direction`	Chrome Full support 29 Full support 29 Full support 21 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Partial support 20 Notes' Partial support 20 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. Notes' *Does not support overflow when using `-reverse`. See bug 1042151 for more info. No support 18 — 20 Disabled' Disabled' 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. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' 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 Full support 11 Full support 11 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 12.1 Full support 12.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Partial support 20 Notes' Partial support 20 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. Notes' *Does not support overflow when using `-reverse`. See bug 1042151 for more info. No support 18 — 20 Disabled' Disabled' 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. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' 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 Full support 12.1 Full support 12.1 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support: Full support
Partial support: Partial support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.

flex-grow

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`flex-grow`	Chrome Full support 29 Full support 29 Full support 22 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 20 Notes' Full support 20 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. No support 18 — 20 Disabled' Disabled' 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 Full support 11 Full support 11 Full support 10 Alternate Name' Alternate Name' Uses the non-standard name: `-ms-flex-positive`	Opera Full support 12.1 Full support 12.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 20 Notes' Full support 20 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. No support 18 — 20 Disabled' Disabled' 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 Full support 12.1 Full support 12.1 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
<0 animate Non-standard'	Chrome Full support 49	Edge Full support 79	Firefox Full support 32 Notes' Full support 32 Notes' Notes' Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.	IE No support No	Opera Full support 36	Safari No support No	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 32 Notes' Full support 32 Notes' Notes' Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.	Opera Android Full support 36	Safari iOS No support No	Samsung Internet Android Full support 5.0

Legend

Full support: Full support
No support: No support
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Uses a non-standard name.': Uses a non-standard name.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.

flex-shrink

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`flex-shrink`	Chrome Full support 29 Full support 29 Full support 22 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 20 Notes' Full support 20 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. Notes' Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' 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. No support 18 — 20 Disabled' Disabled' 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 Full support 10 Notes' Full support 10 Notes' Notes' 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 Full support 12.1 Full support 12.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 8 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 20 Notes' Full support 20 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. Notes' Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' 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. No support 18 — 20 Disabled' Disabled' 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 Full support 12.1 Full support 12.1 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 8 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support: Full support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.

Resources on MDN

Basic concepts of Grid Layout

Sticky footers by Mozilla Contributors is licensed under CC-BY-SA 2.5.