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

Question

我的网页需要以下布局:

|         header       |
| navigation | details |
|            |         |

导航 Pane (动态生成的内容)包含数百个元素。我想在导航 Pane 上创建一个垂直滚动条，使 Pane 的高度为窗口的高度减去标题的高度。

我的页面大致结构如下:

<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;
}

除了导航 Pane 获得窗口高度的 100%，而不是窗口高度的 100% 减去标题的高度之外，这大部分都有效。如果可以避免，我宁愿不明确设置标题的高度。我对网络开发完全陌生，所以我不介意读一些书。我需要做什么才能实现我想要的布局？

Answer 1

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

body { 
    height: 100%;
} 

#content {
    height: 100%;
}

然而，这并没有考虑标题的定位。以下帖子演示了一种技术，该技术利用 Dustin Diaz 的 min-height fast hack 和内容容器上的负边距来实现 100% 高度，同时不干扰标题:

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