Menu
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>
With the following CSS:
#navigation {
float: left;
width: 400px;
height: 100%;
overflow: auto;
}
#details {
margin-left: 420px;
}
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?
536
You must ensure your body tag and content container also have heights of 100%. You must explicitly set the height of the parent element(s) for the child to obey.
body {
height: 100%;
}
#content {
height: 100%;
}
This does not, however, take into consideration positioning of the header. The following post demonstrates a technique utilizing the min-height fast hack by Dustin Diaz and a negative margin on the content container to achieve 100% height while not interfering with the header:
http://www.thechoppr.com/blog/2009/02/08/3-column-fluid-layout-100-height/
198
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>
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
