将 div 高度设置为父级的 100%

我想要我的网页具有以下布局：

|         header       |
| navigation | details |
|            |         |

其中导航窗格（动态生成的内容）包含数百个元素。我希望在导航窗格上创建一个垂直滚动条，以便该窗格的高度减去标题的高度。

我的页面大致结构如下：

<div id=header></div>
<div id=content>
  <div id=navigation></div>
  <div id=details></div>
</div>

使用以下 CSS：

#navigation {
    float: left;
    width: 400px;
    height: 100%;
    overflow: auto;
}

#details {
    margin-left: 420px;
}

这在大多数情况下都有效，只是导航窗格获取的是窗口高度的 100%，而不是窗口高度的 100% 减去标题的高度。如果可以避免的话，我宁愿不明确设置标题的高度。我对网络开发完全陌生，所以我不介意阅读一些内容。我需要做什么才能实现我想要的布局？

您必须确保您的正文标签和内容容器的高度也为 100%。您必须显式设置父元素的高度以使子元素服从。

body { 
    height: 100%;
} 

#content {
    height: 100%;
}

然而，这没有考虑标头的定位。下面的文章演示了一种利用 Dustin Diaz 的最小高度快速破解技术和内容容器上的负边距来实现 100% 高度，同时不干扰标题的技术：

http://www.thechoppr.com/blog/2009/02/08/3-column-fluid-layout-100-height/