内容高度不够时，footer 依然显示到最下面

1. 用flex 解决
[cc]

html {
height: 100%;
}
$footer-height: 30px;
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}

#footer {
line-height: $footer-height;
text-align: center;
}[/cc]
2 padding-bottom margin-top
[cc]
html, body {
height: 100%;
}
$footer-height: 30px;
#content {
min-height: 100%;
margin-bottom: -$footer-height;
padding-bottom: $footer-height;
// requires box-sizing: border-box;
// 下面的不需要 border-box
/*
&::after {
content: ”;
display: block;
height: $footer-height; // footer height
}
*/
}

#footer {
line-height: $footer-height;
text-align: center;
}
或者
#content {
min-height: 100%;
padding-bottom: $footer-height;
}

#footer {
height:$footer-height;
line-height: $footer-height;
text-align: center;
margin-top: -$footer-height;
}

[/cc]