javascript - w2uiでレイアウトウィジェットを全高に拡張するにはどうすればよいですか?

Question

比較的新しい JavaScript/jQuery UI ライブラリw2uiを試しています。LAMP アプリケーションでレイアウトが機能していますが、レイアウト div を画面全体の高さにするにはどうすればよいか疑問に思っています。これは、公式サイトのサイズ変更可能なレイアウトのデモです。

私のレイアウトコンテナになるHTML divは次のとおりです。

<div
    id="layout"
    style="width: 100%; height: 600px; margin-bottom: 10px;"
></div>

これは、高さとして「600px」で機能しますが、「100%」では機能しないため、非表示になります。

そしてJavaScript（簡潔にするためにいくつかのビットを削除しました）：

    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
    $('#layout').w2layout({
        name: 'layout',
        panels: [
            { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
            {
                type: 'left', size: 800, resizable: true, style: pstyle, content: 'tab1'
            },
            { type: 'main', style: pstyle, content: 'main' },
            { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
        ]
    });

レイアウトのドキュメントには、高さ % の設定については言及されていませんが、まだ初期の段階です! おそらく、この質問はプロンプトとして機能します。

1 つの解決策は、レイアウトの上部の Y 寸法を読み取り、これを画面の高さから差し引いて、その高さのレイアウトを作成することです。それはおそらくうまくいくでしょうが、画面のサイズが変更された場合、高さを再計算してリセットする必要があり、これは少しハックです.