Еще один вызов HTML/CSS - полная боковая панель с липким нижним колонтитулом

ОБНОВЛЕНИЕ 2

Итак, когда содержание в #main увеличивается, оно должно нажать нижний колонтитул, например:

... поэтому нижний колонтитул не должен быть position: fixed;. Он должен быть внизу, когда содержимого недостаточно, и его нужно отбрасывать, когда содержимого больше, чем высота страницы.

В обоих сценариях #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 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;
}

Любые предложения о том, как это сделать? Я пробовал использовать position: fixed, но этот подход становится очень уродливым, когда страница достаточно большая, и вам нужно прокручивать.

Ответы

#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
}
#main {
    margin-left: 102px
}