内容に応じて高さが異なるブロックがいくつかあります:JSFiddle。
コンテンツの高さよりも高く、それより低くならないようにしたい。
それは簡単です:
$(".block").each(function(){
$(this).resizable({
handles: 's',
minHeight: $(this).height()
});
});
ただし、一部のブロック(例では4番目)の高さはすでに固定されており、上記のコードを使用すると、このブロックを以前より小さくすることはできません。
コンテンツの高さをminHeightとして設定して、空きスペースを避け、ブロックをコンテンツよりも小さくすることを禁止する方法はありますか?
すべてのブロックのコンテンツを別のブロックに配置し、そのdiv
高さをminHeightとして設定するというアイデアがありますが、要素の構造を変更せずに別の方法があるのではないでしょうか。
[UPD] @Eopin高さをリセットしたくない場合、コードは次のようになります。
$(".block").each(function(){
tmp = $(this).css('height');
if (tmp != 'auto') {
$(this).css('height', 'auto');
}
$(this).resizable({
handles: 's',
minHeight: $(this).height()
});
if (tmp != 'auto') {
$(this).css('height', tmp);
}
});
それは機能し、スクリプトが機能しても視覚的な変化は見られません。速度はブロック<50でも正常です。解決策のようです。他の回答を数日待ってから、質問を閉じます。