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

Question

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

问题是未指定页眉和页脚的高度。我尝试使用表格，但这只能在Chrome中使用。我需要它在IE8 +中工作。修改我的尝试可能很简单吗？

这是我做的（jsfiddle）：

<!--HTML-->
<table>
  <tr><td id=header></td></tr>
  <tr><td id=main><div>content</div></td></tr>
  <tr><td id=footer></td></tr>
</table>

/*CSS*/
html, body, table{
    height: 100%;
    width: 100%;
}
#main{
    height: 100%;
}
#main div{
    height: 100%;
    overflow: auto;    
}

Answer 1

使用position：fixed属性标题和页脚分别粘贴到顶部和底部，以正确调整内容，您需要计算标题高度

<强> DEMO

<强> 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);