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

ОБНОВЛЕНИЕ 2

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

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

В обоих сценариях #sidebar должен охватывать высоту от от нижней части #header до верхней части #footer .

UPDATE

Некоторые жесткие особенности ... нижний колонтитул должен быть внизу всякий раз, когда контент на странице мала, но когда содержимое достаточно велико, оно должно подтолкнуть нижний колонтитул вниз (это функция, описанная в прикрепленных ссылках нижнего колонтитула, которые я предоставил). Мне нужно, чтобы боковая панель всегда находилась между верхним и нижним колонтитулами на полной высоте (от нижнего колонтитула до верха нижнего колонтитула).

Это довольно сложная задача для меня. Идеи ...?

Я пытаюсь заставить этот макет работать без , используя JavaScript ... вот что я имею в виду в виде изображения:

ПЛОХО ... текущий макет

ХОРОШО ... желаемый макет

Обратите внимание, как боковая панель простирается до нижнего колонтитула в желаемом макете. Я использую подходы с липким нижним колонтитулом, http://ryanfait.com/sticky-footer/ и http://www.cssstickyfooter.com/ , и теперь мне нужно расширьте боковую панель, чтобы охватить высоту от верхнего до нижнего колонтитула. Вот что у меня есть ...

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

... и код на случай, если jsFiddle не работает ...

HTML

    
Header
    

        
Sidebar
Sidebar
Sidebar

        
Main
    
    


Footer

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;
}

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