jQueryの親のサイズを変更した後のパーセンテージの幅が正しくありません

Question

親ダイアログの幅を100％にしたいdivがあります。

#content { 
    width: 100%; 
    color:white; 
    background: red; 
} 

それは私が手動で私は、ダイアログ上でanimate()を使用している場合しかし後に手動で、リサイズ、ダイアログのサイズを変更する場合は、このプロパティは、古いリサイズ幅を維持しますする必要があります。

同じことが高さに適用されます。

HEREは問題をよりよく説明する良いjsFiddleです。

divの比率をどのように保つことができますか？

jQueryは（手動でサイズを変更すると）縦横比をどのように更新するのですか？

EDIT：

---

私はどんなダイアログ全体を埋めないことを灰色の背景を望んでいました。ここに私の更新jsfiddleはこれを実証している：http://jsfiddle.net/Esh5h/1/

EDIT 2：

---

私はそれを達成するための機能が、非常に醜い方法見つけた：JSFIDDLE

トリックがあるリサイズを両方ダイアログとその.children(".ui-dialog-content")

EDIT 3：

---

jQueryがサイズを変更するのと全く同じ機能を複製することはできませんか？

Answer 1

これをもう一度見て、要素を調べると、何が起きているのかがわかります。すぐに手動で再サイズなど

ダイアログjQueryのは次のように固定値とstyle属性、注入：あなたはそれがあなたの意図した結果とスタイルを妨げるアニメーション化する場合次に

<div id="dialog" style="width: 376px; min-height: 99px; height: 282px;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0"> 
</div> 

を。あなたがアニメーション化する前style属性を削除

は、これに似た動作しているようだ：

$("#content").click(function() { 
    $("#dialog").attr("style", "").dialog("widget").animate({ 
     width: $(document).width() -100, 
     height: $(document).height() -100, 
     left: 0, 
     top: 0 
    }, 150); 
}); 

---

DEMO - 下

---

にleftとtopを移動編集

そのstyle属性はあなたに問題を与え続けます。それを取り除いた後、再度手作業でサイズを変更すると、再度挿入され、期待どおりの結果が得られなくなります。

私はこれを回避するために見つけた唯一の方法は、サイズ変更でそれらをremivng維持することです：

$("#dialog").on("dialogresize", function(){ 
    $(this).attr("style", ""); 
}); 

編集

私は灰色の背景には関係なく、全体のダイアログを満たしていないことがしたかったです あなたのCSSセレクタの問題であるように思わ

。

変更この：これに

.ui-dialog .ui-dialog-content { 
    background : #cacaca; 
} 

：

.ui-dialog { 
    background : #cacaca; 
} 

注入されたスタイルは、上記の削除コードを言及した使用意志台無しにあなたの意図したスタイルを属性とすることを加えて、あなたはまだ問題がありますre-sizeのスタイル属性と、それをアニメーション化するときのスタイル属性です。あなたが何かを達成しようとしている場合を除き、上記と同じですが、empty-container要素

---

Answer 2

なし -

---

DEMO - 灰色の背景には、ダイアログ常に

DEMOで除去を注入スタイル属性を埋めますダイアログを移動したりサイズを変更したりするだけでなく、クリックイベントでダイアログを再初期化する必要はありません。 jQueryのUIが新しいのdivのカップルにあなたの元のdivをラップする方法に注目してください、私は最も外側の要素をつかみました。あなたのJavascriptでこれを試してみてください。

$("#dialog").dialog(); 

$("#content").click(function() { 

    $(".ui-dialog").animate({ 
     left: 0, 
     top: 0, 
     width: $(document).width() -100, 
     height: $(document).height() -100 
    }, 150); 

}); 

Answer 3

animate({complete:function()})が解決策です。 this jsfiddleが現在機能しています。

私はなぜ知らないが、それは、第二のクリックするだけではなく、最初は正しい動作します。 （少し遅れて）setTimeout()作品とthis example。

Answer 4

あなたはアニメーション関数にコールバックを追加することができます。

$("#content").click(function() { 
    $("#dialog").dialog("widget").animate({ 
     width: $(document).width() -100, 
     height: $(document).height() -100, 
     left: 0, 
     top: 0 
    }, 150, function() { 
     $("#dialog").width($('.ui-dialog').width()); 
    }); 
}); 

JsFiddle Demo