Еще один вызов 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, но этот подход становится очень уродливым, когда страница достаточно большая, и вам нужно прокручивать.

Ответ 1

С небольшим содержанием: http://jsfiddle.net/2ZhpH/41/

С большим количеством контента: http://jsfiddle.net/2ZhpH/42/

Я добавил position: relative в #wrapper, а затем:

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

(почему position: relative? Просто чтобы избежать чего-то вроде этого: http://jsfiddle.net/2ZhpH/40/)

Ответ 2

Чтение действительно не мое, поэтому не вешайте меня, если я что-то пропустил, но я думаю, что это должно сделать это.

http://jsfiddle.net/Fggk6/ - Обратите внимание, что на боковой панели используется фоновое изображение, это намного проще. Как фоновые изображения боковой панели, так и области содержимого относятся к #wrap

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

Ответ 3

Если вы добавите стиль position:absolute; в css #sidebar, он будет полностью опущен.

Затем вам нужно изменить div id="main на <div id="main" style="margin-left:100px;position:absolute;">Main</div> или создать еще один класс css.

Надеюсь, это ясно.

Ответ 4

Как насчет этого?

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

UPDATE

Добавлен цвет фона, чтобы показать, что с нижним колонтитулом, установленным снизу, нормальный, что высота боковой панели находится за нижним колонтитулом. С z-index вы его не заметите.