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

Question

ОБНОВЛЕНИЕ 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, но такой подход становится очень уродливым, когда страница достаточно велика, и вам нужно прокрутить.

Answer 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/)

Answer 2

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

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

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

Answer 3

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

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

ОБНОВЛЕНИЕ

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

Answer 4

Если вы добавите position:absolute; к стилю CSS #sidebar, он будет расширяться до конца.

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

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