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

Question

The jsfiddle: http://jsfiddle.net/nEzfQ/

The iframe should stretch to the parent div size with some padding or margin.. what's wrong with this?

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

What I am trying to achieve: parent div that acts as a frame/border that can be used to drag/resize the iframe..

Caveat: I need the size of the outer div to be the real size, no padding or margin to it.

Answer 1

I'm not sure you can actually achieve this with CSS only. I suggest you try a walkaround using JS listener over the resizable element.

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

With Output

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

Without Output

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