Question

我希望在使用HTML5时拥有<frameset>，并且我设法使用html代码创建了一些东西，我想让两个iframe可以调整大小但是并排保持并且我在两个iframe之间有问题，因为我的代码使它们独立调整大小，我希望像旧版<frameset>中实现的那样调整大小。

这是我的HTML代码：

<body>
    <div class="resizable1">
        <iframe class="menu" src="menu.html"></iframe>
    </div>
    <div class="resizable2">
        <iframe class="mainContent" src="events.html"></iframe>
    </div>
</body>

这是我的css：

.ui-resizable-helper {
    border: 1px dotted gray;
}

.resizable1 {
    float: left;
    width: 20%;
    height: 80%;
    display: block;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}

.resizable2 {
    float: left;
    width: 75%;
    height: 80%;
    display: block;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}

.menu {
    float: left;
    width: 20%;
    height: 80%;
}

.mainContent {
    float: left;
    width: 75%;
    height: 80%;
}

这是我的jQuery脚本：

$(function() {
        $(".resizable1").resizable({
            animate : true,
            animateEasing : 'swing',
            imateDuration : 500
        });
        $(".resizable2").resizable({
            animate : true,
            animateEasing : 'swing',
            imateDuration : 500
        });
    });
</script>

Answer 1

我同意上述内容，我建议手动调整它们，但如果你想保留动画，可能会这样做:(使用containment属性限制高度并尝试计算新宽度需要的内容在第一个调整大小后手动调整第二个调整大小）

JSFiddle

在HTML中添加了一个容器：

<div id="container">
    <div class="resizable1">
        <iframe class="menu" src="www.google.com">
            bla
        </iframe>
    </div>
    <div class="resizable2">
        <iframe class="mainContent" src="www.yahoo.com"></iframe>
    </div>
</div>

在CSS中设置高度：

.ui-resizable-helper {
    border: 1px dotted gray;
}
#container{
    height: 500px;
    width: 600px;
}
.resizable1 {
    float: left;
    width: 20%;
    height: 100%;
    display: block;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}

.resizable2 {
    float: left;
    width: 75%;
    height: 100%;
    display: block;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}

.menu {
    float: left;
    width: 20%;
    height: 80%;
}

.mainContent {
    float: left;
    width: 75%;
    height: 80%;
}

在jquery中手动调整大小（没有完全工作抱歉，希望这有用）

$(function() {
        $(".resizable1").resizable({
            animate : true,
            animateEasing : 'swing',
            imateDuration : 500,
            containment: '#container'
        });
        $(".resizable2").resizable({
            animate : true,
            animateEasing : 'swing',
            imateDuration : 500,
            containment: '#container'
        });
    $(".resizable1").resize(
        function(e){
            var fullWidth = $("#container").innerWidth();
            var r1Width = $(".resizable1").outerWidth();
            $(".resizable2").width(fullWidth - r1Width-6);
            var r2Width = $(".resizable2").outerWidth();
            console.log(r1Width+" + "+r2Width+" = "+fullWidth);
        }
    );
});

可调整大小的iframe jquery

1 个答案: