您的位置:首页 > Web前端 > JQuery

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

2015-12-18 10:00 260 查看
做了一个视频电商,要求上边放视频,下边有聊天室可以聊天。因为融云提供免费的即时通讯服务,所以用的融云的web SDK .但是有一个问题就是,聊天室我给了样式:
#chatRoom{height:10rem;overflow:scroll;}


发送消息的时候,消息内容距离发送框有一大截空白,并且不同的移动设备遗留的空白页有所不同。最后的解决办法就是具体算出我聊天室的高,不能用:10rem.并且一定要有高,滚动条才会生效。

具体代码如下:

[code]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');
    });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: