jquery - jquery 可调整大小：动态 minHeight

Question

我怎样才能有一个minHeight基于内部容器的动态？我有：

<div id="outer-div" >
    <div id="inner-div"></div>
</div>

然后在 jQuery 上：

$( "#outer-div" ).resizable({
    containment: "#another-outer-div",
    minWidth: 200,
    minHeight: $('#inner-div').height(),
    resize: function(event, ui) {
        ui.size.width += (ui.size.width - ui.originalSize.width);
        $(this).position({
            of: $("#another-outer-div"),
            my: "center center",
            at: "center center"
        })
    }
});

以上minHeight不工作，但希望你明白我想做什么；可调整大小的高度div不应小于div具有内容的内部。

Answer 1

我认为这就是您要搜索的内容：

$("#outer-div").resizable({
    containment: "#another-outer-div",
    minWidth: 200,
    start: function(event,ui) {
        $("#outer-div").css({
            minHeight: $('#inner-div').outerHeight()
        });
    }
});

Answer 2

我从来没有弄乱 ui-resizable 但这是我设置最小高度的方式，以便内容延伸到底部。

adjustedHeight = (the equation for min-height);
$(".stretchClass").css({'min-height':(adjustedHeight+'px')})

Answer 3

我意识到这已经很老了，但是在初始化期间，您只能为 minHeight 和 minWidth 分配一个整数。您不能使用查询。正确的方法是修改“start”-Handler 中的 minHeight 或 minWidth 选项，如下所示：

$( "#outer-div" ).resizable({
    containment: "#another-outer-div",
    minWidth: 200,
    minHeight: $('#inner-div').height(),
    start: function(event,ui) {
        var myMinHeight = $('#inner-div').height();
        $( "#outer-div" ).resizable( "option", "minHeight", myMinHeight );
    },
    resize: function(event, ui) {
        ui.size.width += (ui.size.width - ui.originalSize.width);
        $(this).position({
            of: $("#another-outer-div"),
            my: "center center",
            at: "center center"
        })
    }
});