javascript - 一个带有 iframe 子级的可拖动/可调整大小的 div，它通过一些填充/边距延伸到父级？

Question

jsfiddle：http: //jsfiddle.net/nEzfQ/

iframe 应该使用一些填充或边距拉伸到父 div 大小。这有什么问题？

<div class="outer ui-widget-content">
    <iframe src="about:blank"></iframe>
</div>

iframe {
    display: block;
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin: 20px;
    padding: 0;
    border: none;
    background-color: green;
}

.outer {
    top: 20px;
    left: 30px;
    position: absolute;
    width: 300px;
    height: 200px;
}

我想要实现的目标：作为框架/边框的父 div，可用于拖动/调整 iframe 的大小。

警告：我需要外部 div 的大小是真实大小，没有填充或边距。

Answer 1

我不确定您是否可以仅使用 CSS 来实现这一点。我建议您尝试在可调整大小的元素上使用 JS 侦听器进行绕行。

$("#container").resizable({
    stop: function (event, ui) {
        $("#dim").text(JSON.stringify(ui.size));
        $("#myiframe").width(ui.size.width).height(ui.size.height);

    }
});

http://jsfiddle.net/nEzfQ/1/

Answer 2

jsFiddle 演示

带输出

$("#outerdims").val(JSON.stringify({
    height: $(".outer").height(),
    width: $(".outer").outerWidth(true)
}));
$("#iframedims").val(JSON.stringify({
    height: $("iframe").height(),
    width: $("iframe").outerWidth(true)
}));
$(".outer").resizable({
    resize: function (event, ui) {
        var newWd = ui.size.width - 20;
        var newHt = ui.size.height - 20;
        $("iframe").width(newWd).height(newHt);
        $("#outerdims").val(JSON.stringify({
            height: $(".outer").height(),
            width: $(".outer").outerWidth(true)
        }));
        $("#iframedims").val(JSON.stringify({
            height: $("iframe").height(),
            width: $("iframe").outerWidth(true)
        }));
    }
}).draggable();

无输出

$(".outer").resizable({
    resize: function (event, ui) {
        var newWd = ui.size.width - 20;
        var newHt = ui.size.height - 20;
        $("iframe").width(newWd).height(newHt);
    }
}).draggable();