Javascript 带有iframe子对象的可拖动/可调整大小的div，该子对象通过一些填充/边距延伸到父对象？

JSFIDLE：

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;
}

iframe{
显示：块；
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
利润率：20px；
填充：0；
边界：无；
背景颜色：绿色；
}
.外部{
顶部：20px；
左：30px；
位置：绝对位置；
宽度：300px；
高度：200px；
}

我试图实现的目标是：父div充当框架/边框，可用于拖动/调整iframe的大小

---

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

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

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

    }
});

输出

$("#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();

无输出

$("#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();

---

因此，您想在调整外部div的大小时更改iframe的大小吗？是的，但即使在开始时，它也应该正确定位/调整大小，例如，在距离外部divOk 20px的范围内。您能告诉我为什么在外部div上有

ui小部件内容
类吗？你需要它吗？这是造成部分问题的原因。我不需要它，它添加了一个漂亮的边框之类的东西？你忘了更新小提琴了。。不管怎样，这都可能是一个解决方案：不是我想要的。。我希望能找到一个css/不太黑的解决方案。。但有一个问题：如果我调整回“太快”，光标会越过iframe并失去调整大小的功能。。有解决办法吗？显然，这个脚本的80%都在更新输入的值，这样我就可以看到发生了什么。我会给你两个版本。是的，这是一个解决方案（我在@Amenadiel-）的答案后做了类似的事情）：一件小事仍然困扰着我：如果你试图调整“back”的大小缩小iframe，你就会失去对调整大小的关注。。有没有办法避免这种情况？让我看看当我将
stop
事件更改为
resize
事件时会发生什么。好的，效果很好。有一点滞后，但这只是小部件本身的固有特性。是的，确实：）如果速度太快，光标越过iframe的绿色区域，则会松开调整大小。。哦，好吧。