0

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

私が達成しようとしているもの:iframeのドラッグ/サイズ変更に使用できるフレーム/境界線として機能する親div..

警告: 外側の div のサイズを実際のサイズにする必要があります。パディングやマージンは必要ありません。

4

2 に答える 2

1

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();
于 2013-08-03T15:59:48.983 に答える