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

Question

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

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

谢谢

维韦克

完整代码在这里：http: //jsfiddle.net/AuURL/

调整大小.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");
});
});