css - 关于移动端在安卓下的布局

Question

我做移动端的时候下面这种布局在安卓机上他会把页面往上撑
必须要固定header\section\footer的高度，现在我只固定了header和footer的高度，
中间的高度是用js算出来的，我觉得这种不好，
css有什么办法能算通过上面和下面的高度算出中间的高度

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

------css-----        
 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;
}