根据渲染的div和可用视口调整div的大小

Question

我是一名医生，在一个小型部门网站上工作。我在包装器“maincontainer”中使用双列设计。包装器包含一个“顶部”，一个左浮动的“导航”，一个右侧的“contentcolumn”div和一个固定位置的“footer”。 包装“maincontainer”具有背景颜色并且是集中的。

如果需要滚动，我希望将“maincontainer”重新调整为height contentcolumns + 140px。基于我有限的知识，我使用的是JS代码（如下）。但是，如果我在“contentcolumn”中放置任何图像，则“maincontainer”仍然短，“contentcolumn”超过“maincontainer”。
我寻求帮助纠正这种行为。

由于

的Vivek

完整代码在这里：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");
});
});