挖坑记录_Jquery-Weui weui-tabbar组件 沉底

今天使用JQuery-Weui 发现weui-tabbar 不沉底，查询了一下相关资料 ，要给父容器增加高度。问题解决；
另外，需要动态设置好每个DIV得高度 ，使父容器高度永远等于设备分辨率高度，并计算好每个DIV得高度使样式贴合

HTML：

<div id="container">
    <div class="title">订单列表</div>
    <div id="mainDiv" style="overflow:auto;"></div>
    <div class="weui-tabbar">
        <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
            <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
            <div class="weui-tabbar__icon">
                <img src="./images/icon_nav_button.png" alt="">
            </div>
            <p class="weui-tabbar__label">微信</p>
        </a>
        <a href="#tab2" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="./images/icon_nav_msg.png" alt="">
            </div>
            <p class="weui-tabbar__label">通讯录</p>
        </a>
    </div>
</div>

CSS：
html,body{

 height: 100%;
-webkit-tap-highlight-color: transparent;

}

JS:

$(function () {
     setDivDynamicHeight();
});


/*获取设备高度*/
var getEquipmentHeight = function () {
    //获得设备高度
    return document.body.clientHeight;
}


/*动态给页面高度赋值*/
var setDivDynamicHeight = function () {
   //底部栏高度
    var tabbarHeight = $(".weui-tabbar")[0].scrollHeight;
    //头部高度
    var titleHeight = $(".title")[0].scrollHeight;
    //计算高度
    var MainDivHeight = getEquipmentHeight() - tabbarHeight - titleHeight;
	//设置高度	
    document.getElementById("mainDiv").style.height = MainDivHeight+"px";
}

来源：CSDN

作者：CrazyMax_zh

链接：https://blog.csdn.net/CrazyMax_zh/article/details/103976439