.height（）ウィンドウのサイズ変更後にスクロール可能なDIVを作成する

Question

このスクリプトの目的は、ページの高さの100％から上のセクションを差し引いたDIVを作成することです。ここで

ページです：

http://nerdi.net/playground/kev/indexNEW.html

ここでは、それが働いているように見えるjsFiddle、上ストリップダウンされます。私にとって

http://jsfiddle.net/JVKbR/94/

、（ChromeとFFに）スクロール可能なdiv要素（.MID-COL-メインは）のみウィンドウのサイズを変更すると、スクロール可能となり（など、隅からドラッグを最大化）

どれでも私が間違ってやっているアイデア？

編集：JasperとDavinの両方の解決策があります。ありがとうございました。

ここ

$(function() { 
    var midColTopHeight = $("div.mid-col-top").height(), 
     $window   = $(window), 
     $midColMain  = $('div.mid-col-main'); 
    $window.resize(function(){ 
     $midColMain.height(($window.height() - midColTopHeight)); 
    }).trigger('resize'); 
}); 

私はdocument.readyイベントハンドラ内のあなたのバインディングコードを配置している：あなたは基本的に、あなたもすぐにコードを実行していたとdiv.mid-col-mainはまだ利用できない、準備ができてDOMを待つ必要が

Answer 1

window要素のresizeイベントをトリガーしました。私もあなたのコードを変更しないものをキャッシュするために少し最適化しました（あなたは同じ要素をすべてresizeイベントで選択する必要はありません）。

このコードをdocument.readyイベントハンドラで実行する代わりに、このコードをHTMLドキュメントの最後（終了の</body>タグの直前）に配置すると、ターゲットとする要素が利用可能になります。