Can someone help me with laying out a page that includes a horizontal navigation bar at the top and a content area that will display scrollbars if necessary?
I've been trying to achieve this by using two divs - one for the navigation bar with dimensions set to 100% width and 50px height, positioned absolutely at the top left corner; and another div for the content with dimensions set to 100% width and height, margin-top of 50px, and overflow:auto for scrollbars. However, I'm encountering an issue where the scrollbar is offset by the 50px margin, causing the content to be pushed off the bottom of the page. Removing the margin resolves the issue but places the content behind the navigation bar.
I also attempted wrapping the elements in a container and playing around with setting the margin on the container instead, with the overflow property in the child element, but it didn't produce the desired outcome.
Here's a link to a jsFiddle with comments to better explain the problem:
http://jsfiddle.net/Piercy/hggXJ/
HTML
<div id="nav">
<h1>Navigation</h1>
</div>
<!-- <div id="contentContainer"> -->
<div id="content">
<div id="oversizeContent">
<p>You can see the black border on this green box, but you cannot see the bottom black border. Similarly you cannot see the bottom arrow of the scrollbar.</p>
<p>I tried putting a wrapper around the content and putting the margin on that but the scrollbar still overflows. Uncomment the contentContainer div and comment/uncomment the corresponding css.</p>
</div>
</div>
<!-- <div> -->
CSS
html, body
{
height:100%;
overflow:hidden;
color:white;
font-weight:bold;
}
#nav
{
height:50px;
width:100%;
background-color:red;
position:absolute;
top:0;
left:0;
z-index: 2;
}
#contentContainer
{
/* uncomment this if you bring #contentContainer into play */
/*
margin-top:50px;
position:absolute;
top:0;
left:0;
*/
height:100%;
width:100%;
}
#content
{
/* moving this into #contentContainer doesnt help either */
/* comment this if you bring #contentContainer into play */
margin-top:50px;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:blue;
z-index: 1;
overflow: auto;
}
#oversizeContent
{
background-color:green;
width:400px;
height:1000px;
border:10px solid black;
}