css3移动端布局

Question

css3有什么技巧能让section的高度加上header和footer的高度正好是屏幕的高度
不能用定位的，这关系到安卓的软键盘会把页面向上顶
---css---
.indexPage{
    width:100%;
    height:100%;  
    overflow:hidden; 
}
.indexPage header{
    height:100px;
    overflow:hidden;
}
.indexPage section{
     width:100%;
     overflow:hidden;
}
.indexPage footer{
     height:100px;
     overflow:hidden;
}

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

Answer 1

这种布局使用 flex 再合适不过了。

csshtml,
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;
}

前缀使用 autoprefixer 自动生成，浏览器的兼容性很理想。下面是 codepen 中的效果：

http://codepen.io/yuezk/pen/NqEqVv