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