logo标签列表

将div的高度设置为父元素的100%

htmlcss
5
我希望我的网页能呈现以下布局： 

|         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%。如果可以避免，我不想显式设置标题栏的高度。我完全是新手，所以我不介意阅读一些资料。我需要做什么才能实现我想要的布局？

尝试在导航器中使用 overflow:scroll。另外，您是否能看到标题或内容占用了其空间？ - NawaMan
overflow:scroll会产生相同的效果。我可以看到标题，但滚动条似乎是整个窗口的高度，而不是仅仅导航div的高度。 - Nate
我已经尝试了许多不同的设置，似乎无法帮助您。也许，在这种情况下，表格更合适。只是一个想法。 - NawaMan
我很好奇，您不想给标题栏设置高度的原因是什么？ - sfarbota
你能否在简单的jsfiddle（或等价物）中重新创建你的问题？ - Kamil Sindi
3个回答
1

你必须确保body标签和内容容器的高度也为100%。你必须显式地设置父元素的高度，以便子元素遵循。

body { 
    height: 100%;
} 

#content {
    height: 100%;
}

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

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

设置主体和内容元素的高度似乎没有帮助。你说的“它不考虑标题的定位”是什么意思？ - Nate
1
你说过：“如果可以避免的话，我宁愿不显式设置标题的高度。” 我很确定除非转换为表格，否则无法避免。话虽如此，这里有一个使用高度设置为50px的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 区域添加背景，您必须将其实际应用于围绕它们的相应外壳 div。但所有的实际内容都应放在内部 div 中。

我说过，我宁愿不设置标题的高度，因为我不想知道它的高度。我的当前页面标题只是一些50pt的文本，但我以后可能会用图形替换它。我希望每次更改标题时都不需要修改导航div的高度/填充属性。 - Nate
我能理解。然而，固定高度有助于在所有浏览器中保持一致的页面布局。当您更改标题内容时，更改标题高度可能有点麻烦，但是一旦您选择了喜欢的标题，就不必再担心它了。当然，这完全取决于您，但我相当确定，如果没有错误，自动调整大小的标题div和下面的2个全屏div是不可能的。 - sfarbota
0
你必须将html和body的高度都设置为100%：html，body {height: 100%;}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接