将div高度设置为父级的100％ [英] Set div height to 100% of parent
问题描述
我想为我的网页使用以下布局：
I want the following layout for my web page:
| header |
| navigation | details |
| | |
导航窗格（动态生成的内容）包含数百个元素。我想在导航窗格上创建一个垂直滚动条，以使窗格的高度减去标题的高度。
Where the navigation pane (content dynamically generated) contains hundreds of elements. I want a vertical scroll bar to be created on the navigation pane such that the pane has the height of the window minus the height of the header.
我的页面大致有以下结构：
My page roughly has the following structure:
<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开发完全陌生，所以我不介意做一些阅读。我需要做什么来实现我想要的布局？
This mostly works except that the navigation pane gets 100% of the height of the window, not 100% of the height of the window minus the height of the header. I'd rather not explicitly set the height of the header if I can avoid it. I am completely new to web development so I don't mind doing some reading. What do I need to do to achieve the layout that I want?
推荐答案
你说：如果我可以避免，我宁愿不明确设置标题的高度 em>。我很确定你不能避免它，而不切换到表。也就是说，这里是一个例子，如何使用divs与标题的高度设置为50px：
You said "I'd rather not explicitly set the height of the header if I can avoid it." I'm pretty sure you can't avoid it without switching to tables. That said, here is an example of how you can do it using divs with the header's height set to 50px:
<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>
一个备注：如果要向导航和/或细节区域，你将必须实际应用这些到他们各自的shell divs包围它们。但是，所有实际内容都会进入内部div。
One note: If you want to add backgrounds to the navigation and/or details areas, you will have to actually apply those to the their respective shell divs that encase them. All actual content, however, would go in the inner divs.
这篇关于将div高度设置为父级的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
