Плавающая боковая панель: как получить боковую панель на всю высоту окна?

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

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

Контейнер основного контента и сайдбара тоже не имеет фиксированной высоты:

#container {
margin: 0 auto;
padding: 0;
max-width: 1024px;
position: relative;
background: url(../img/booksbg.jpg) fixed;
background-size: cover;
overflow: hidden;
}

Как я могу это сделать? Сайт реагирует на медиа-запросы.

Я пытался:

sidebar {
height: 100vh; 
}

но это, кажется, не работает с боковой панелью.


sidebar css height viewport equals
person Lark    schedule 01.05.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Присвоение высоты position:absolute; и 100% боковой панели подойдет. http://jsfiddle.net/07zLb3xx/

#sidebar {
    height: 100%;
    position: absolute;
    right: 0;
}

Если у вас есть проблемы с выходом боковой панели из родительской оболочки, укажите position:relative; родительской оболочке следующим образом: http://jsfiddle.net/07zLb3xx/1/

person Chun    schedule 01.05.2015
comment
Спасибоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо! Я забыл, что абсолютное позиционирование тоже работает, а не только плавает. Вы спасли меня от нескольких часов налитых кровью глаз! - person Lark; 01.05.2015