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

【问题标题】：Set div height to 100% of parent将 div 高度设置为父级的 100%
【发布时间】：2011-12-20 05:25:43
【问题描述】：

我希望我的网页具有以下布局：

|         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% 的窗口高度减去标题的高度。如果可以避免的话，我宁愿不明确设置标题的高度。我对 Web 开发完全陌生，所以我不介意阅读。我需要做什么才能实现我想要的布局？

【问题讨论】：

尝试使用overflow:scroll 作为导航器。另外，您是否看到标题或内容也占用了它的空间？
overflow:scroll 提供相同的效果。我可以看到标题，但滚动条似乎是整个窗口的高度，而不是导航 div 的高度。
我尝试了多种不同的设置，但似乎对您没有帮助。也许，这是 table 更适合的情况之一。只是一个想法。
我很好奇，你不想给标题增加高度的原因是什么？
你能用一个简单的 jsfiddle（或等价物）重现你的问题吗？

标签： html css

【解决方案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/

【讨论】：

设置正文和内容元素的高度似乎没有帮助。 “它不考虑标题的位置”是什么意思？

【解决方案2】：

您说过“如果可以避免的话，我宁愿不明确设置标题的高度。”我敢肯定，如果不切换到表格，您就无法避免它。也就是说，这是一个示例，说明如何使用标题高度设置为 50 像素的 div：

<html>
    <head>
        <style type="text/css">
            html, body {
                margin:0;
            }

            div#content {
                position:absolute;
                top:0px;
                z-index:-1;
                width:100%;
            }

            html, body, div#content, div#navigation-shell, div#details-shell {
                height:100%;
            }

            div#header {
                height:50px;
            }

            div#navigation-shell {
                float:left;
                width:400px;
            }

            div#navigation, div#details{
                padding-top:50px;
            }
        </style>
    </head>
    <body>
        <div id="header"></div>
        <div id="content">
            <div id="navigation-shell">
                <div id="navigation"></div>
            </div>
            <div id="details-shell">                
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

注意事项：如果您想为navigation 和/或details 区域添加背景，您必须将它们实际应用到包含它们的各自的shell div。但是，所有实际内容都将放在内部 div 中。

【讨论】：

我说我宁愿不设置标题的高度，因为我不想知道它。我当前的页眉只是大约 50pt 的文本，但我稍后可能会用图形替换它。我希望每次更改标题时都不需要修改导航 div 的高度/填充属性。
我能理解。但是，固定高度将有助于在所有浏览器中保持一致的页面布局。当你改变它的内容时，改变它的高度可能有点痛苦，但是一旦你确定了一个你喜欢的标题，你就不必再担心了。这当然取决于你，但我相当肯定，如果没有错误，下面有 2 个全屏 div 的自动调整标题 div 是不可能的。

【解决方案3】：

您必须将 html 和正文高度都设置为 100%：html, body {height: 100%;}

【讨论】：