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.
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
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid-template-rows | Chrome
Full support
57
| Edge Full support 16 | Firefox
Full support
52
| 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
52
| Opera Android
Full support
43
| 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
| Edge Full support 16 | Firefox
Full support
52
| 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
52
| Opera Android
Full support
43
| Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 |
repeat() | Chrome
Full support
57
| Edge Full support 16 | Firefox
Partial support
57
| 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
52
| Opera Android
Full support
43
| 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
| 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.
flex-direction
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-direction | Chrome
Full support
29
| Edge
Full support
12
| Firefox
Partial support
20
| IE
Full support
11
| Opera
Full support
12.1
| Safari
Full support
9
| WebView Android
Full support
4.4
| Chrome Android
Full support
29
| Firefox Android
Partial support
20
| Opera Android
Full support
12.1
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
2.0
|
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-grow | Chrome
Full support
29
| Edge
Full support
12
| Firefox
Full support
20
| IE
Full support
11
| Opera
Full support
12.1
| Safari
Full support
9
| WebView Android
Full support
4.4
| Chrome Android
Full support
29
| Firefox Android
Full support
20
| Opera Android
Full support
12.1
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
2.0
|
<0 animate | Chrome Full support 49 | Edge Full support 79 | Firefox
Full support
32
| 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
| 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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-shrink | Chrome
Full support
29
| Edge
Full support
12
| Firefox
Full support
20
| IE
Full support
10
| Opera
Full support
12.1
| Safari
Full support
9
| WebView Android
Full support
4.4
| Chrome Android
Full support
29
| Firefox Android
Full support
20
| Opera Android
Full support
12.1
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
2.0
|
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.