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.

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

57

291

16

52

402

No

44

283

10.1
minmax()

57

291

12

52

402

?

44

283

10.1
repeat()

57

Yes4

16

525

Yes6

No

44

Yes7

10.1
fit-content()291651 No4410.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support57

57

291

16

52

402

4410.36.0
minmax() No ?12

52

402

No10.3 ?
repeat() ? ? No

525

Yes6

?10.3 ?
fit-content()575716514410.37.0

1. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Enable experimental Web Platform features preference.

4. This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

5. calc() doesn't work in repeat() (see bug 1350069).

6. This feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. This feature is behind the Enable experimental Web Platform features preference.

flex-direction

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

29

21 -webkit-

12

12 -webkit-

201

18 — 202

49 -webkit-

44 -webkit- 3

11

10 -ms-

12.1

15 -webkit-

9

7 -webkit-

FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

29

21 -webkit-

29

25 -webkit-

Yes

Yes -webkit-

?

12.1

15 -webkit-

? ?

1. Since Firefox 28, multi-line flexbox is supported.

2. 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.

3. 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.

flex-grow

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

29

21 -webkit-

12

12 -webkit-

201

18 — 202

113

12.1

15 -webkit-

6.1 -webkit-
<0 animate49 ?324 ? No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

29

21 -webkit-

29

25 -webkit-

Yes

Yes -webkit-

201

18 — 202

12.1

15 -webkit-

? ?
<0 animate ? ? ?324 No No ?

1. Since Firefox 28, multi-line flexbox is supported.

2. 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.

3. Supported as -ms-flex-positive.

4. Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.

flex-shrink

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

29

21 -webkit-

12

12 -webkit-

201 2

49 -webkit-

44 -webkit- 3

18 — 204

105

12.1

15 -webkit-

8 -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

29

21 -webkit-

29

25 -webkit-

Yes

Yes -webkit-

201 2

49 -webkit-

44 -webkit- 3

18 — 204

12.1

15 -webkit-

? ?

1. Since Firefox 28, multi-line flexbox is supported.

2. Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.

3. 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.

4. 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.

5. 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.

Resources on MDN

Document Tags and Contributors

Contributors to this page: chrisdavidmills, rachelandrew
Last updated by: chrisdavidmills,