Div height 100% formatting Issue

Problem

I am trying to make the sidebar fill the height between the header and foot. As you can see it is going behind the footer. I would like it to stop at the top of the footer. Any help would be great!

Demo at: http://www.jsfiddle.net/pEbhK/

The HTML:

<div class="header">
        <h2>Development Area</h2>
</div>
<div class="sidebar">
        <h2>Current Projects</h2>
    <ul>
        <li>iCalendar</li>
        <li>MyBand - Student Center</li>
    </ul>
        <h2>Future Projects</h2>
    <ul>
        <li>Mobile Application</li>
        <li>RSS Feed</li>
    </ul>
</div>
<div class="clear"></div>
<div class="footer">&copy; 2013</div>

The CSS:

html, body, h1, h2 {
    margin:0px;
    padding:0px;
}
.clear {
    clear:both;
}
.header {
    display:inline-block;
    width:100%;
    background:#ABBFF2;
    height:100px;
    border-bottom: 5px solid #7F9DEB;
    text-align:center;
}
.header h2 {
    padding-top:38px;
}
.sidebar {
    position: fixed;
    height:100%;
    width:250px;
    background:#ABBFF2;
    border-right:5px solid #7F9DEB;
    float:left;
}
.sidebar h2 {
    text-align:center;
}
.footer {
    position:fixed;
    display:inline-block;
    bottom:0px;
    width:100%;
    height:30px;
    border-top:5px solid #7f9deb;
    text-align:center;
}
Problem courtesy of: Andrew Johnson

Solution

Try height:calc(100% - 140px) in .sidebar

.sidebar {
    position: fixed;
    height:calc(100% - 140px);
    width:250px;
    background:#ABBFF2;
    border-right:5px solid #7F9DEB;
    float:left;
}

updated jsFiddle File

Solution courtesy of: Roy Sonasish

Discussion

Or write this to .footer in the css

background-color: #fff;
Discussion courtesy of: user2746831

A non-calc() way of doing this...

Your sidebar and footed have position: fixed, so they are positioned with respect to the view port.

You can size the sidebar using the following CSS:

.sidebar {
    position: fixed;
    top: 105px;
    bottom: 35px;
    left: 0px;
    width:250px;
    background:#ABBFF2;
    border-right:5px solid #7F9DEB;
}

The value for the top offset is the header height + 5px for the border. Likewise, the bottom offset is the footer height + 5px for its border.

See demo at: http://jsfiddle.net/audetwebdesign/Lfpxq/

Note: You may want to add a min-height to the sidebar to prevent the content overflow issues. I think the same issue arises when using the calc() method.

Discussion courtesy of: Marc Audet

This recipe can be found in it's original form on Stack Over Flow.