Css 具有固定页眉和页脚的跨浏览器表格布局

我需要帮助实现以下布局：页眉和页脚分别粘贴到顶部和底部，内容填充所有剩余空间

问题是没有指定页眉和页脚的高度。我试着使用表格，但只有在Chrome中才起作用。我需要它在IE8+中工作。也许修改我的尝试很简单

以下是我所做的（）：

内容
/*CSS*/
html、正文、表格{
身高：100%；
宽度：100%；
}
#主要{
身高：100%；
}
#主要部门{
身高：100%；
溢出：自动；
}

使用位置：固定属性页眉和页脚分别粘贴到顶部和底部，要正确调整内容，需要计算页眉高度

CSS

#header {
    background-color: green;
    position:fixed;
    top:0;
}
#footer {
    background-color: green;
    position:fixed;
    bottom:0;
}

jQuery

var headerHeight = $("#header").height();

$("#main").css('margin-top' , headerHeight+10);

---

好的，使用JavaScript是目前支持旧浏览器的唯一解决方案，但我仍然希望没有它也能达到这个目标，因为Chrome可以处理表格布局。

var headerHeight = $("#header").height();

$("#main").css('margin-top' , headerHeight+10);