html - レンダリングされた div と使用可能なビューポートに基づいて div のサイズを変更する

Question

私は小さな部門のウェブサイトに取り組んでいる医師です。ラッパー "maincontainer" 内で 2 列のデザインを使用しています。ラッパーには、「トップセクション」、左フローティングの「ナビゲーション」、右側の「コンテンツ列」div、および固定位置の「フッター」が含まれます。ラッパー「maincontainer」には背景色があり、集中化されています。

スクロールが必要な場合に備えて、「maincontainer」のサイズを contentcolumns + 140px の高さに変更したいと考えています。私の限られた知識に基づいて、JS コード (以下) を使用しています。ただし、「contentcolumn」に画像を入れると、「maincontainer」は短くなり、「contentcolumn」は「maincontainer」をオーバーシュートします。
この動作を修正するための助けを求めます。

ありがとう

ヴィベク

完全なコードはこちら: http://jsfiddle.net/AuURL/

resize.js

$(document).ready(function() {
 var maincontainer_height=document.getElementById('contentcolumn').clientHeight + 140;
 $("#maincontainer").css("height",maincontainer_height + "px");
});

$(document).ready(function() {
$(window).resize(function() {
 var maincontainer_height=document.getElementById('contentcolumn').clientHeight + 140;
 $("#maincontainer").css("height",maincontainer_height + "px");
});
});