另一个HTML/CSS布局挑战 – 全高度侧边栏粘贴页脚

所以当#main中的内容增加时，它应该向下推页脚，就像这样：

所以页脚不应该是位置：固定。当内容不足时，应该在底部，当页面的高度比内容高的时候应该被压下。

在这两种情况下，#sidebar需要跨越#header底部到#footer顶部的高度。

UPDATE

一些残酷的细节…当页面上的内容很小时，页脚应该在底部，但是当内容足够大时，它应该将页脚向下推(这是粘贴页脚链接中描述的功能提供)。我需要侧边栏始终位于页眉和页脚之间的全高度(从页眉的底部到页脚的顶部)。

这对我来说是相当的挑战。想法…？

我试图使这个布局工作，而不使用JavaScript …这是我的意思在图片形式：

BAD …当前布局

好…想要布局

请注意边栏如何在所需的布局中一直延伸到页脚。我正在使用粘性页脚方法，http://ryanfait.com/sticky-footer/和http://www.cssstickyfooter.com/，现在我需要扩展侧边栏，从标题到页脚跨越高度。这是我有…

http://jsfiddle.net/UnsungHero97/2ZhpH/

…和代码，以防jsFiddle关闭…

HTML

<div id="wrapper">
    <div id="header"><div id="header-content">Header</div></div>
    <div id="content">
        <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
        <div id="main">Main</div>
    </div>
    <div class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>

CSS

html,body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footer {
    height: 50px;
}
#footer-content {
    border: 1px solid magenta;
    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
}
.push {
    height: 50px;
    clear: both;
}    

#header {
    height: 50px;
}
#header-content {
    border: 1px solid magenta;
    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
}
#content {
    height: 100%;
}
#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    height: 100%;
    float: left;
}

有什么建议如何做到这一点？我已经尝试使用位置：固定，但当页面足够大，您需要滚动时，该方法变得非常难看。