jquery - 親コンテナーに合わせてウィンドウのサイズを変更する際に、JQuery UI Resizable でサイズ変更可能なフロート要素のサイズを変更する

Question

フローティング要素と JQuery UI Resizable およびウィンドウのサイズ変更イベントの問題を解決するのに問題があります。

これが問題のあるjsFiddleです。

基本的に、親コンテナー (.tab) と 3 つの子 div があります。.content1、.content2、.content3。.content1 が「alsoInverResize」関数でサイズ変更されると、.content2 と content3 の両方が反比例してサイズ変更されます。

<div class="tab">
    <div class="container1"></div>
    <div class="container2"></div>
    <div class="container3"></div>
</div>

$(".container1").resizable({
    containment: "parent",
    handles: "s",
    alsoInverResize: ".container2, .container3",
    maxHeight: $(".tab").height()
});

3 つの子 div はすべて、親に合わせて幅と高さのパーセンテージで始まりますが、サイズを変更するとフラットなサイズになり、ウィンドウのサイズを元のサイズよりも小さくすると、親コンテナーからオーバーフローして .container3 を作成します.container2 の下で左にフローティングするか、ウィンドウが元のサイズよりも大きいサイズになる場合は、親よりも幅が狭くなります。

ウィンドウのサイズ変更イベントでパーセンテージサイズを再度設定しようとしましたが、サイズ変更可能なプラグインが機能しなくなり、明らかに望ましい効果ではありません( http://jsfiddle.net/fh77N/2/ ):

$(".container1").css({"height" : "50%", "width" : "100%"});
$(".container3").css({"height" : "50%", "width" : "70%"});
$(".container2").css({"height" : "50%", "width" : "30%"});

3 つの子コンテナーをウィンドウの比率に等しくサイズ変更するか、window.resize の親にするか、サイズ変更可能な機能を維持しながら元のパーセンテージ サイズに戻します。