JQueryMobile+融云webSDK创建的聊天室有多余空白

做了一个视频电商，要求上边放视频，下边有聊天室可以聊天。因为融云提供免费的即时通讯服务，所以用的融云的web SDK .但是有一个问题就是，聊天室我给了样式：#chatRoom{height:10rem;overflow:scroll;}
发送消息的时候，消息内容距离发送框有一大截空白，并且不同的移动设备遗留的空白页有所不同。最后的解决办法就是具体算出我聊天室的高，不能用：10rem.并且一定要有高，滚动条才会生效。
具体代码如下：

var targetHeight = 0;
    var changeSize = function(){
        /*设置chat高度*/
        var clienHeight=document.documentElement.clientHeight; //屏幕的高度
        var headerHeight=$("#MyHeader").height();//header的高度
        var videoHeight=$("#videoHeader").height();//video的高度
        var barHeight= $(".ui-navbar").height();//navBar高度
        targetHeight = clienHeight - headerHeight - videoHeight - barHeight - 24;
    };
    $('#chatRoomDrop').off('click').on('click',function(){
        if(!targetHeight){
            changeSize();
        }
        $('#MessagesContent').height(targetHeight+'px');
    });

    /*客服*/
    $('#severDrop').off('click').on('click',function(){
        if(!targetHeight){
            changeSize();
        }
        $('#MyMessagesContent').height(targetHeight+'px');
    });



发现一个问题就是，我是整理近期问题才会来csdn更新博客，所以导致好多小伙伴私信我的问题，我都是过了好久才看到，
有不明白的地方，可以微博找我。 
微博：璐飞童鞋。关注之后，私信即可。