display的用法flex

 做移动端这种布局格式很好，上和下固定，中间自适应，但要设置body为100%
  这里还有个问题是安卓设备下会把他撑上去，所以要兼容安卓得要上间下都得固定

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
article {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
header {
  height: 50px;
  background: #ccc;
}
footer {
  height: 50px;
  background: #ccc;
}

section {
  flex: 1;
  background: #eee;
}

---html---
 <article class="indexPage">
     <header></header>
     <section></section>
     <footer></footer>
</article>