2013-05-31 4 views
6

現在、width属性をautoに設定すると、ウィンドウの全幅を取ることができます。変更(ブラウザウィンドウのサイズ変更や別の画面サイズでの表示など)。例:http://jsfiddle.net/NnsN2/JQuery UIダイアログをフルウィンドウで占有し、ウィンドウサイズの変更に動的に調整する

しかし、私はheightを同じにすることはできません。 autoに設定しようとしても、常にコンテンツに合う最小の高さになります。

ウィンドウの高さを最初に取得($(window).height())し、それをheightに使用する通常の方法は静的であり、ウィンドウサイズの変更に動的に適応しないため、ここでは機能しません。

どのようにして高さを常にウィンドウの高さに合わせ、ウィンドウサイズの変更に適応させることができますか?

+0

ウィンドウ全体をカバーするダイアログが必要ですか? – Alnitak

+0

@Alnitakは、はい、ウィンドウ全体をカバーし、ウィンドウサイズが変わると自動的にサイズ変更します。 – skyork

+2

jQueryのUIダイアログは、おそらくジョブの正しいコントロールではないようです。 – Alnitak

答えて

13

あなたは、実行時に要素の#id.classを取得し、ウィンドウの幅と高さに応じて幅/高さを作ってみることができます。

$(window).resize(function() { 
    $('.ui-dialog').css({ 
     'width': $(window).width(), 
     'height': $(window).height(), 
     'left': '0px', 
     'top':'0px' 
    }); 
}).resize(); //<---- resizes on page ready 

checkout in fiddle

+0

これは動作します。ページが画面より大きい場合、 '$(document).height'を使用してコンテンツの完全な高さを取得できます – messerbill

1

ここで私がすることができた方法ですこの問題を「解決する」jQuery UI Ver 1.8.17のために:

の後で、ダイアログが開かれ、あなたがそのIDを取得したと仮定すると、fol lowing:

$("#DlgID").parent().css('height', $(window).height()); 

実際の高さは、したがって対話内容、参照を含むあなたの<div>の親によって決定されます。このメソッドを使用して、親の他のプロパティを制御することもできます。

ハッピーコーディング!

関連する問題