移动端的头尾固定问题

新起了个移动端项目，在头位固定问题上又踩了一次踩过的坑。爬起来之后弹弹土，乖乖的坐下来码字，把踩坑换来的经验教训记录下来，避免自己再次重蹈覆辙。

经验之谈，项目要先布出大框架，再来一点一点填充丰盈，这样能避免最后万一出错会影响到整体的大布局。否则如果从上到下走一步写一步，布局到最后才发现整体布局要改，那才是超级大坑，坑你没商量。还没得埋怨，因为这坑是自己挖的……

移动端静态布局最大的问题就是头尾固定，今天来分享一个常用的简单便捷的布局方式：flex布局。
弹性布局应用极广，灵活而方便。当然，不知道什么是flex布局的请去自行百度，本篇不讲入门，只谈应用。
来来来，上代码上代码。

  <title>头尾部固定</title>  

  *{  
      margin: 0;  
      padding: 0;  
  }  
  .container{ 
      /* 设置弹性盒模型 */ 
      display: flex; 
      display: -webkit-flex;  
      /* vh 相对于可视区域的高度 */
      min-height: 100vh;  
      /* 设置主轴方向 */
      flex-direction: column;  
      /* 文字居中 */
      text-align: center;  
      /* 字体大小 */
      font-size: 50px;  
      /* 字体加粗 */
      font-weight: bold;  
  }  
  header,footer{  
      height: 150px;  
      background-color: rgb(250, 79, 193);  
      line-height: 100px;  
      color: rgb(251, 252, 253);  
  }  
  .middle{  
      /* 设置居中  也可以写auto */
      flex: 1;  
      background-color: rgb(116, 216, 255); 
  }  

上面的是样式代码，下面是布局代码：

 <div class="container">  
    <header>头部</header>  
    <div class="middle">中间区域</div>  
    <footer>底部</footer>  
</div>  

然后再来看看效果图吧：

1533908298(1).png

我用了萌萌哒的颜色，粉粉嫩嫩超可爱哦。