关于easyui tab iframe 高度问题
$(function() {
    for ( var i = 0; i < 1; i++) {
        addTab(i, 'http://www.163.com');
    }
});
function addTab(subtitle, url) {
    if (!$('#tabs').tabs('exists', subtitle)) {
        $('#tabs').tabs('add', { 
            title: subtitle,
            content: createFrame(url),
            closable: true 
        });
        $('#tabs').tabs('getSelected').css('width', 'auto'); 
        //重新tab body宽度为auto,如果你上面的添加语句设置了selected为false,注意使用下面注释的这句来获取你的tab
        //$('#tabs').tabs('getTab', subtitle).css('width', 'auto');
    }
    tabClose();
    $('#tabs').tabs('getSelected').css('width', 'auto'); 
}

function createFrame(url) {
    var s = '<iframe scrolling="auto" frameborder="0"  src="' + url
            + '" style="width:100%;height:100%;"></iframe>';
    return s;
}

function tabClose() {
    /*双击关闭TAB选项卡*/
    $(".tabs-inner").dblclick(function() {
        var subtitle = $(this).children("span").text();
        $('#tabs').tabs('close', subtitle);
    });
}



    <div title="欢迎使用" style="padding: 20px; overflow: hidden;height: auto;width: 100px;" id="home">

        <h1>
            <a href="javascript:addTab('test','addTDemo.jsp');">111</a>
        </h1>

    </div>

</div>

 运行后的代码


style="width: auto; height: auto;">

        <div class="panel" style="display: block; width: auto;">
            <div title=""
                style="padding: 20px; overflow: hidden; height: auto; width: 1558px;"
                id="home"
                class="panel-body panel-body-noheader panel-body-noborder">

                <h1>
                    <a href="javascript:addTab('test','addTDemo.jsp');">111</a>
                </h1>

            </div>
        </div>

        <div class="panel" style="display: none; width: auto;">
            <div title=""
                class="panel-body panel-body-noheader panel-body-noborder"
                style="width: 1598px; height: auto;">
                <iframe scrolling="auto" frameborder="0" src="http://www.163.com"
                    style="width:100%;height:100%;"></iframe>
            </div>
        </div>
    </div>
</div>


""
图片说明
高度很低。

2个回答

已经解决。去掉tabs的class,在JS里写
$("#tabs").tabs({
width:$("#tabs").parent().width(),
height:$("#tabs").parent().height()
});


解决iframe高度问题,设置号100%,去除scroll,在iframe上一级的div加个overflow:hidden

dscms
dscms 回复dscms: 是高,宽100%,根本不用JavaScript
4 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐