How to set the scroller's height ina vue page with fixed bottom tabbar ?

[????]

I write a vue page according to the weex-hackernews example 
https://github.com/weexteam/weex-hackernews. 
This page has top and bottom tab bar, the middle area is used to show contents 
with scroller.
How could I set the scroller height? My android phone's deviceHeight is 
1776px??and deviceWidth is 1080px??
The tab bar's height is 160px??
So I set the scroller's height to 1011px, which is caculated by 
(1776-160-160)/(1080/750)=1011px??
But the scroller can not scroll to the end.

Here is the vue page??

<template>
    <div class="page">
        <div style="clear:both;">
        </div>
        <scroller style="overflow:hidden;height:1011">
            <div class="main">
                <text class="line">line 1</text>
                <text class="line">line 2 - 
deviceWidth-{{$getConfig().env.deviceWidth}}</text>                
                <text class="line">line 3 - 
deviceHeight-{{$getConfig().env.deviceHeight-}}</text>                
                <text class="line">line 4</text>
                <text class="line">line 5</text>
                <text class="line">...</text>
                <text class="line">222</text>
                <text class="line">111</text>
                <text class="line">The end</text>
            </div>
        </scroller>

        <div class="headerW">
          <div class="item">
              <div>
                <text>tab1</text>
              </div>
          </div>
          <div class="item">
              <div>
                <text>tab2</text>
              </div>
          </div>
          <div class="item">
              <div>
                <text>tab3</text>
              </div>
          </div>
        </div>
        
        <div class="footerW">
          <div class="item">
              <div>
                <text>tab111</text>
              </div>
          </div>
          <div class="item">
              <div>
                <text>tab222</text>
              </div>
          </div>
          <div class="item">
              <div>
                <text>tab333</text>
              </div>
          </div>
        </div>
    </div>
</template>

<style scoped>
.item{
    flex:1;
    justify-content: center;
    align-items:center;
    border-width:1;
  }
.line {
    height:50;
}
.page {
    margin:2px;  
    border:0; padding:0; 
    background-color: #234;
    flex-direction: column;

    overflow:hidden;
    }

  .headerW{
    flex-direction: row;
    height:160;
    background-color:#ABC;
    
    left:0;
    top:0;

    position: fixed;
    width:750;
  }
  
  .footerW{
    flex-direction: row;
    height:320px;
    background-color:#987;

    bottom:0;
    left:0;

    position: fixed;
    width:750;
  }
  .main {
      margin-top: 160;
  }

</style>