Scaleable sidebar that fits page height but not overlapping footer/header - html

Question

So I managed to make a sidebar in a div that fit to the left side perfectly but unfortunatly it goes under my footer and header enough that I'm attempting to place a second div inside that sidebar div that will serve to hold actual content.
I'm trying to fit the sidebar to be scale-able (change whenever I adjust the height of the browser to whatever) but not overlap my header or footer or go under it. I have the positioning set to absolute and the header/footer set to fixed.
HTML:
<div id=sidebar"></div>
CSS:
#sidebar {
background-color: #1c1c1c;
left: 0;
width: 300px;
height: 100%;
border-right: #212121 5px solid;
border-top: #212121 5px solid;
border-bottom: #212121 5px solid;
position: absolute;
z-index: 1;
}
This will be used to hold page navigation whereas my nav element is being used to hold site navigation. I'm trying to see if this might involve another language (I only really know HTML/CSS) and also trying to place this sidebar div directly in the center of the left side. Don't quite know how to go about doing that. I believe the footer and header are what one might call 'sticky'. They are position: fixed, again.

Answer 1

I agree with Abdulla. We need to see all your code, but based on what you provided I think you may need to set the following css in your style sheet or in the page head:
html, body{
height:100%;
}
I found this article that may help you http://www.mattboldt.com/css-100-percent-height/
But without knowing more this is all I can provide.

Answer 2

Your Question not clear. As i understood answer is bellow.
Remove these
#header {
position: fixed;
}
#pgdirectory {
position: absolute;
}
#footer {
position: fixed;
}
Add these
.clear
{
clear: both
}
.body
{
float: left;
}
in your HTML
<div id="header">
<nav>
<ul>
<li>Home</li>
<li>Web Development</li>
<li>Fursuits and Mascots</li>
<li>Art Customs</li>
<li>Computer Building</li>
<li>Future Plans</li>
</ul>
</nav>
</div>
<div class="clear"> </div> //New
<div class="body"> //New
<div id="pgdirectory">
<div id="links"> TEXT TEXT TEXT</div>
</div>
<div id="content">
<h1>SITE UNDER CONSTRUCTION</h1>
<p></p>
<h2>Contact Info</h2>
<br>
Email: smith#kempt.us<br>
Skype: mcKempt<br>
</div>
</div> //closing of Body Div
<div class="clear"> </div> //New
<div id="footer">