Css Div高度100%格式化问题

我试图让侧边栏填充头部和脚部之间的高度。正如你所看到的，它在页脚后面。我希望它停在页脚的顶部。任何帮助都会很好

演示地点：

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>

在

侧栏中尝试
高度：计算（100%-140px）

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

或将此内容写入css中的.footer

background-color: #fff;

这是一种非-calc（）方法。。。
您的侧边栏和脚踏板具有
位置：固定的
，因此它们相对于视图端口进行定位

可以使用以下CSS调整侧栏的大小：

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

top
偏移量的值为页眉高度+5px（边框）。同样地，
bottom
偏移量是其边框的页脚高度+5px

请参见演示：

注意：您可能希望在侧边栏中添加最小高度，以防止内容溢出问题。我认为在使用
calc（）
方法时也会出现同样的问题。
@ceejayoz-这一点很好，但我只支持较新的浏览器（ie 9及以上）140px是页眉和页眉的高度footer@AndrewDonaldJohnson是的，我只是想指出它作为参考。您可能还需要添加一个
-webkit-calc
规则，以满足当前Safari的需要。@SonasishRoy您可以在不使用calc的情况下获得相同的结果（）在侧边栏上使用顶部和底部偏移量，因为它是
位置：固定的
@Marc是获得相同结果的另一种方法，谢谢你，马克。请在问题中添加代码的相关部分，而不是仅仅链接一个JSFIDLE。@Spontifix我相应地编辑了这篇文章。