Полоса прокрутки CSS переполнена, если установлен нижний атрибут CSS

Question

У меня есть div, у которого изображение нижнего колонтитула занимает 26 пикселей пространства.CSS настроен на отображение вертикальной полосы прокрутки, когда это необходимо, однако я должен убедиться, что полоса прокрутки не пересекается с областью нижнего колонтитула, поэтому я использую bottom:26px;, чтобы вызвать ее.Когда это происходит, хотя полоса прокрутки смещается вверх, и я не вижу верхней части содержимого или верхней стрелки полосы прокрутки.Я не уверен, что изменить, чтобы css исправил это так, чтобы полоса прокрутки была в самом верху, и оставила 26-пиксельный интервал внизу для моего изображения.Любая помощь приветствуется.

HTML

<div id="channel-container">
<div id="channel">

</div></div>

CSS

#channel {
color: #FFFFFF;
text-align: left;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
bottom: 26px;
}
#channel-container {
float: right;
width: 31%;
height: 100%;
}

Answer 1

Подумайте о реструктуризации вашего HTML. Если div должен прокручиваться, а нижний колонтитул - нет, я бы не собирал их вместе. Установите поле / отступ в 0 в нижнем колонтитуле и то же самое для нижней части прокручиваемого блока. Они должны плавно смешиваться. Также устраняется необходимость использования абсолютного положения и нижнего значения.

Вот скрипка того, что я думаю, что вы после. http://jsfiddle.net/vdZ6R/

<div id="container">
  <div id="scrollablediv"></div>
  <div id="footer"><img src="" /></div>
</div>