0，html { height:100%
1，body { display:flex; min-height:100% 注：考虑相对于谁的100%
2,  main { flex:1 } 注：自动瓜分剩余空间。

		
		/*外*/
        .tabbar-container {
            width: 100%;
            height: 50px;
            background-color: #fff;
        }
		/*ul 内*/
        .tabbar {
            display: flex;
            height: 100%;
        }
		/*li*/
        .tabbar-item {
            flex: 1;
            /*background-color: yellow;*/
        }
		/* a内容 */
        .tabbar-link {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
		
		/* 图 */
        .tabbar-link .iconfont {
            font-size: 24px;
        }
		

        .tabbar-item-active .tabbar-link {
            color: #de181b;
        }


=======================================================================

 <footer class="tabbar-container">
        <ul class="tabbar">
            <li class="tabbar-item tabbar-item-active">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-category"></i>
                    <span>分类页</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-cart"></i>
                    <span>购物车</span>
                </a>
            </li>
            <li class="tabbar-item">
                <a href="###" class="tabbar-link">
                    <i class="iconfont icon-personal"></i>
                    <span>个人中心</span>
                </a>
            </li>
        </ul>
    </footer>