Sticky footers

在此页

要求
The recipe
Choices made
Alternate method
浏览器兼容性
Resources on MDN
相关话题

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.

A sticky footer pushed to the bottom of a box

要求

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

注意 : 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 而不是 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.

浏览器兼容性

grid-template-rows

更新 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 完整支持 57 完整支持 57 完整支持 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 完整支持 16 完整支持 16 不支持 12 — 79 Alternate Name Alternate Name Uses the non-standard name: `-ms-grid-rows`	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 10 Alternate Name 完整支持 10 Alternate Name Alternate Name Uses the non-standard name: `-ms-grid-rows`	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 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 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
Animation of tracks	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 66	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 66	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
`fit-content()`	Chrome 完整支持 29	Edge 完整支持 16	Firefox 完整支持 51	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 51	Opera Android 完整支持 43	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
`minmax()`	Chrome 完整支持 57 完整支持 57 完整支持 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 完整支持 16	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 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 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
`repeat()`	Chrome 完整支持 57 完整支持 57 完整支持 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 完整支持 16	Firefox 部分支持 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()` (见 bug 1350069 ). 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 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 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
`subgrid`	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 71 完整支持 71 完整支持 69 注意事项 Disabled 注意事项 Enabled by default in Firefox Nightly. Disabled ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
部分支持
不支持
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。

flex-direction

更新 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 完整支持 29	Edge 完整支持 12	Firefox 部分支持 20 注意事项部分支持 20 注意事项注意事项 Since Firefox 28, multi-line flexbox is supported. 注意事项 Does not support overflow when using `*-reverse` 。见 bug 1042151 for more info. 不支持 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. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 完整支持 11 完整支持 11 完整支持 10 Prefixed Prefixed Implemented with the vendor prefix: -ms-	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 部分支持 20 注意事项部分支持 20 注意事项注意事项 Since Firefox 28, multi-line flexbox is supported. 注意事项 Does not support overflow when using `*-reverse` 。见 bug 1042151 for more info. 不支持 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. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0

图例

完整支持
部分支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

flex-grow

更新 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 完整支持 29	Edge 完整支持 12	Firefox 完整支持 20 注意事项完整支持 20 注意事项注意事项 Since Firefox 28, multi-line flexbox is supported. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 11 完整支持 11 完整支持 10 Alternate Name Alternate Name Uses the non-standard name: `-ms-flex-positive`	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 20 注意事项完整支持 20 注意事项注意事项 Since Firefox 28, multi-line flexbox is supported. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0
<0 animate 非标	Chrome 完整支持 49	Edge 完整支持 79	Firefox 完整支持 32 注意事项完整支持 32 注意事项注意事项 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0` .	IE 不支持 No	Opera 完整支持 36	Safari 不支持 No	WebView Android 完整支持 49	Chrome Android 完整支持 49	Firefox Android 完整支持 32 注意事项完整支持 32 注意事项注意事项 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0` .	Opera Android 完整支持 36	Safari iOS 不支持 No	Samsung Internet Android 完整支持 5.0

图例

完整支持
不支持
非标。预期跨浏览器支持较差。
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。
要求使用供应商前缀或不同名称。

flex-shrink

更新 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 完整支持 29	Edge 完整支持 12	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` . 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled `layout.css.prefixes.webkit` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 10 注意事项完整支持 10 注意事项注意事项 Internet Explorer 10 uses `0` 而不是 `1` as the initial value for the `flex-shrink` property. A workaround is to always set an explicit value for `flex-shrink` 。见 Flexbug #6 for more info.	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	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` . 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled `layout.css.prefixes.webkit` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0

图例

完整支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

Resources on MDN

Basic concepts of Grid Layout

元数据

最后修改： Jul 7, 2020

CSS
CSS 参考
Layout cookbook
指南
1. Breadcrumb Navigation
2. Card
3. Center an element
4. Column layouts
5. Contribute a recipe
6. Grid wrapper
7. List group with badges
8. Pagination
9. Recipe: Media objects
10. Split Navigation
11. Sticky footers

在此页

要求

The recipe

Choices made

Alternate method

浏览器兼容性

grid-template-rows

图例

flex-direction

图例

flex-grow

图例

flex-shrink

图例

Resources on MDN

相关话题