html – 将div高度设置为父级的100％

2023年12月5日 255次阅读

我想为我的网页设置以下布局：

|         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％高度同时不干扰标题的技术：