ЛЕНИЕ 2

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

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

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

ОБНОВИТЬ

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

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

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

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

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

Обратите внимание, как боковая панель простирается до нижнего колонтитула в нужном макете. Я использую липкие нижние колонтитулы,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;
}

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