CSS基础测试7：紧贴底部的页脚

[wingmeng]

题目：

---

我的回答：

> 在线 Demo <

body {margin: 0;}
main, content, footer {display: block;}

.container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;  /* 不设置固定高度 */
}

.content {flex: 1;}

.footer {
  color: #fff;
  background: #555;
}

[wingmeng]

自我评分：一般

优秀、良好、一般、差劲

不足之处：

1. 无突出亮点；
2. 语义化上有待加强。

学习收获：

1. margin: auto 的用法。

[wingmeng]

最佳实践：

body {margin: 0;}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {margin-top: auto;}

.footer {
  color: #fff;
  background: #555;
}