CSS 如何将 div 高度设置为 100% 减去一些像素

Question

我最近在尝试设计一个有点难的网页。

我有三个主要的 div。第一个用于页眉，另一个用于页脚，第三个用于主要内容。页眉和页脚必须固定在页面的顶部和底部。它们的位置不能随着浏览器窗口大小的改变而改变。第三个 div 必须位于这些 div 之间的空白区域。它可以通过调整窗口大小来调整大小以适合页面。

主 div 的高度必须完全改变，因为我想在那个 div 中放置一个 Google map ，所以这个 div 的高度很重要。

我尝试了很多东西，但都没有成功。将 div 的 height 设置为 100%(而 body 和 html 的高度也为 100%)不是答案。使用表格(三行，两行固定高度，一行可变高度，height="100%")也有一些问题(在 IE8 中，当我声明一个 doctype，第二行的 div(height:100%)不再适合单元格了!

现在我不知道要做这个工作。我能做什么？

注意:我不喜欢使用 CSS3，因为与旧浏览器的兼容性对我来说很重要。

Answer 1

你可以尝试这样的事情。

HTML

   <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>

CSS

#header {
    height:50px;
    width: 100%;
    background: black;
    position: fixed;
    z-index: 1;
    top: 0;
}

#body {
    height:100%;
    width: 100%;
    background: #CCC;
    position: absolute;
    z-index: 0;
}

#footer {
    height: 50px;
    width: 100%;
    background: #0CF;
    position: fixed;
    bottom: 0;
}

这是一个 fiddle - http://jsfiddle.net/6M59T/