使用弹性盒子布局实现固定页脚

Flexbox Sticky Footer 1. 容器设置为100%页面高度，且display属性为flex，弹性方向(flex-direction)为列； 2. 页面主体的弹性生长（flex-grow）属性设置为1，这样内容自动伸展把footer挤到贴紧容器下边。

CSS3，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2761
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/**
 * Sticky Footer
 *
 */

html,
body,
.wrapper {
    min-height: 100%;
    min-height: 100vh;
}
.wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.main {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
@import "//fonts.googleapis.com/css?family=Lato:300|Merriweather";
html {
    font-size: 16px;
}
body {
    background-color: #fff;
    font-family: 'merriweather';
}
.theme-green {
    background-color: #9eccb8;
}
h1,
h2,
h3,
p {
    margin-bottom: 1em;
}
a,
a:visited {
    color: #0074D9;
}
.theme-green a,
.theme-green a:visited {
    color: black;
}
a:hover {
    color: #005198;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
header,
nav,
footer,
.centered {
    background-color: #6cbad9;
    padding: 2em;
    font-family: 'lato';
    color: white;
}
.theme-green header,
.theme-green nav,
.theme-green footer,
.theme-green .centered {
    background-color: #34825f;
}
header,
.centered {
    text-transform: uppercase;
    padding: 30px 32px;
}
header h1,
.centered h1 {
    font-size: 3em;
    font-size: 7vw;
    margin-bottom: 10px;
}
header h2,
.centered h2 {
    font-size: 1.2em;
    font-size: 4vw;
    margin-bottom: 0;
}
.centered {
    text-align: center;
}
.centered h1 {
    font-size: 2em;
    font-size: 4.5vw;
    margin-bottom: 10px;
}
.centered h2 {
    font-size: 1.2em;
    font-size: 3vw;
}
code {
    font-family: monospace;
    background-color: #eee;
    padding: 0 5px 2px;
    border-radius: 2px;
    color: #3D9970;
    position: relative;
    top: -1px;
}
footer {
    text-align: center;
}
main,
nav {
    padding: 2em 32px;
    line-height: 1.4;
}
nav {
    background-color: #5fa4bf;
}
nav a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul {
    /* display: flex; */
}
.logo {
    background-image: url("https://astronautweb-co-proxy.oonix.com.au/wp-content/themes/astronaut-2014/images/astronaut-light.svg");
    width: 85px;
    height: 18px;
    background-size: cover;
}
.panel,
.alert {
    background-color: #d9f4ff;
    font-size: .9em;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 1em;
}
.alert {
    background-color: #ff544a;
    color: white;
}
.button {
    background-color: #FF4136;
    padding: 7px 14px 7px;
    margin-bottom: 1em;
    border: none;
    border-bottom: 2px solid #cc342b;
    border-radius: 4px;
    color: white;
    font-weight: 300;
    font-family: 'lato';
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    display: inline-block;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
    -webkit-appearance: none;
}
.button:hover,
.button:active {
    background-color: #cc342b;
}
.button:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    outline: 0;
}
.btn-blue {
    background-color: #0074D9;
    border-bottom-color: #005dae;
}
.btn-blue:hover,
.btn-blue:active {
    background-color: #005dae;
}
.form {
    margin-top: 1em;
    margin-bottom: 1em;
}
.form input,
.form .button {
    font-size: 14px;
    line-height: 14px;
}
.form input {
    padding: 0 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 30px;
}
.form .button {
    padding: 0 12px;
    height: 32px;
    margin-bottom: 0;
}
body {
    margin: 0;
}

HTML

Flexbox Sticky Footer 1. 容器设置为100%页面高度，且display属性为flex，弹性方向(flex-direction)为列； 2. 页面主体的弹性生长（flex-grow）属性设置为1，这样内容自动伸展把footer挤到贴紧容器下边。

CSS3，教程

编辑器支持Emmet

快捷键

Flexbox Sticky Footer 1. 容器设置为100%页面高度，且display属性为flex，弹性方向(flex-direction)为列； 2. 页面主体的弹性生长（flex-grow）属性设置为1，这样内容自动伸展把footer挤到贴紧容器下边。

CSS3，教程

使用CSS3裁剪路径（clip-path）属性实现燕尾形状的文本

使用CSS3自动实现文章标题级别（自动目录 | 自动序号）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：