jquery resizable：dynamic 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

我从来没有搞错用户界面可调整大小，但这里是我如何设置我的最小高度，使内容延伸到底部。

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

Answer 2

我觉得这是你的搜索内容：

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

Answer 3

我意识到这是比较旧，但在初始化过程中，您只能分配给并了minHeight minWidth整数。你不能使用查询。正确的方法是修改“开始” - 处理程序中的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" 
     }) 
    } 
});