CSS紧贴底部的页脚

有时候需要实现上中下三栏布局，中间内容区域高度自适应，顶部和底部位置固定不变。

• 已知顶部和底部高度且高度不变

<header>
  <h1>Site name</h1>
</header>
<main>
 <p>Bacon Ipsum dolor sit amet...
<!-- 从baconipsum.com那里复制一些示意文字过来 --></p>
</main>
<footer>
 <p>© 2015 No rights reserved.</p>
 <p>Made with ♥ by an anonymous pastafarian.</p>
</footer>

main {
  min-height: calc(100vh - 2.5em - 7em);
  /* 避免内边距或边框搞乱高度的计算： */
  box-sizing: border-box;
}

这种方法的缺点很明显：它不仅要求我们确保页脚内的文本永远不会折行，而且每当我们改变页脚的尺寸时，都需要跟着调整min-height 值。

• 高度变化：flexbox布局

body {
  display: flex;
  flex-flow: column; // 为 flex-direction 和 flex-wrap的缩写
  min-height: 100vh;
}
main {
  flex: 1; // 大于0的数即可
}