CSS 移动端导航固定于底部

html 如下：

<div class="index">
    <!--主要内容部分-->
    <div class="g-main">
        
    </div>
    <!--底部导航-->
    <div class="g-foot">
        <div class="m-item">
            <a href="">首页</a>
        </div>
        <div class="m-item">
            <a href="">消息</a>
        </div>
        <div class="m-item">
            <a href="">任务大厅</a>
        </div>
        <div class="m-item">
            <a href="">客服</a>
        </div>
        <div class="m-item">
            <a href="">我的</a>
        </div>
    </div>
</div>

将导航固定于底部，主要是设置 position 为fixed

.g-foot {
        z-index: 1000;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
 }

滚动时为了不遮挡住主要部分的内容，则需设置主要内容部分为绝对定位

.g-main {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 3.5rem;
    left: 0;
    overflow: auto;
}