需求

我们先看一下底部 copyright 有什么特点：

  1. 页面底部居中。
  2. 如果内容不满，则直接出现在页面底部。
  3. 如果内容充满需要滑动，则滑动到底部后出现。

实现

首先介绍一下 flex，flex-direction，flex-grow：

  1. flex 布局又称弹性布局，它能给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
  2. flex-direction 属性决定主轴的方向（即项目的排列方向）。
  3. flex-grow 定义子元素的放大比例。
    1. 如果为 0，表示不放大。
    2. 如果子元素都为 1，则子元素平分剩余空间。
    3. 如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

因此，我们的思路如下：

  1. 父元素 content，定义为一个 flexbox，且 flex-direction 为 column（纵向排列子元素）。
  2. 子元素 content-main，设置 flex-grow 为 1。
  3. 子元素 content-copyright，设置 flex-grow 为 0（默认值）。

核心代码

  1. .content {
  2.   display: flex;
  3.   flex-direction: column;
  4. }
  6. .content-main {
  7.   flex-grow: 1;
  8. }
  10. .content-copyright {
  11.   flex-grow: 0;
  12.   text-align: center;
  13. }

完整代码参考

  1. <!DOCTYPE html>
  2. <head>
  3.   <style>
  4.     html,
  5.     body {
  6.       margin: 0;
  7.       padding: 0;
  8.       width: 100%;
  9.       height: 100%;
  10.     }
  12.     .content {
  13.       display: flex;
  14.       flex-direction: column;
  16.       width: 100%;
  17.       height: 100%;
  18.       overflow: scroll;
  19.     }
  21.     .content-main {
  22.       flex-grow: 1;
  24.       background-color: lightblue;
  25.     }
  27.     .content-copyright {
  28.       flex-grow: 0;
  29.       text-align: center;
  31.       background-color: lightgreen;
  32.     }
  33.   </style>
  34. </head>
  35. <body>
  36.   <div class="content">
  37.     <div class="content-main">
  38.       <!-- 如果没有任何内容，则会占满；否则会滚动 -->
  39.       <div style="height: 150vh"></div>
  40.     </div>
  41.     <div class="content-copyright">copyright</div>
  42.   </div>
  43. </body>

参考资料

  1. Flex 布局 by MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
  2. Flex 布局 by 阮一峰 http://ruanyifeng.com/blog/2015/07/flex-grammar.html

[END]