Держите боковую панель зафиксированной сверху при прокрутке контента ⇐ CSS

[Anonymous]

У меня проблема с html/css.

Привет, у меня есть такой дизайн:

Код: Выделить всё

HHHHHHHHHH
CCCCCCCSSS
CCCCCCCSSS
CCCCCCCSSS
CCCCCCCSSS
FFFFFFFFFF

H — мой заголовок, F — нижний колонтитул, C — содержимое и S — моя боковая панель.

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

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

Привет, есть этот код:

Код: Выделить всё

.container {
min-height:100%;
position:relative;
}
.header {
position: fixed;
top: 0;
background:#f1f1f1;
width: 100%;
margin: 0px auto;
}
.sidebar {
float: right;
width: 300px;
background-color: #FFF;
padding:10px;
padding-bottom: 100px;
padding-top: 50px;
}
.content {
width: 960px;
padding:10px;
padding-bottom: 100px;
padding-top: 50px;
margin-left: 100px;
}
.footer {
position:fixed;
bottom:0;
width:100%;
height:60px;
background:#f1f1f1;
text-align: center;
vertical-align: middle;
}

Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/136 ... nt-scrolls