H5 实现底部固定导航菜单

需求如下图

• 一个固定在底部的菜单
• 滚动条不会超出至菜单

html结构如下

  <div class="layout">
    <div class="content-container">
        <router-view></router-view>
    </div>
    <div class="tab-bar-container">
        <tab-bar></tab-bar>
    </div>
  </div>

1. Fixed（滚动条会滚动底部）

.layout{
    .content-container{
        padding-bottom:45px;
    }
    .tab-bar-container{
        position:fixed;
        bottom:0;
        height:45px;
        z-index:999;
    }
}

2. Absolute

.layout{
    .content-container{
        position: absolute;
        top: 0;
        bottom: 45px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        height: auto;
    }
    .tab-bar-container{
        position: absolute;
        bottom: 0;
        left: 0;
        height:45px;
    }
}