Question

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 Demo

有输出

$("#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子，它延伸到父级，带有一些填充/边距？

2 个答案: