Боковая панель, чтобы заполнить высоту всей страницы

Question

Это, пожалуй, общий вопрос, но все ответы, которые я нашел в Интернете, не работают должным образом.

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

Я попытался это методы:

HTML:

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="content-area"></div> 
</div> 

CSS:

body { 
    margin: 0; 
} 

#wrapper { 
    width: 100%; 
} 

#sidebar { 
    width: 280px; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

#content-area { 
    width: 900px; 
    margin-left: 280px; 
} 

..и:

HTML:

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="content-area"></div> 
</div> 

CSS:

body { 
    height: auto; 
    min-height: 100%; 
    margin: 0; 
} 

#wrapper { 
    width: 100%; 
    height: 100%; 
} 

#sidebar { 
    width: 280px; 
    height: 100%; 
    float: left; 
} 

#content-area { 
    width: 900px; 
    height: 100%; 
    float: left; 
} 

Первый работает отлично, пока содержание не будет продлен: http://jsfiddle.net/B3bCb/1/ Если это произойдет, то боковая панель останавливается в зависимости от высоты браузера окна.

Второй один не работал на всех: http://jsfiddle.net/B3bCb/2/

Я также попробовал метод искусственных колонок, но мне нужно, чтобы иметь CSS-тень (что размытие, распространение и цвета, может динамически изменяться на сайте) на моей боковой панели, что я не могу сделать правильно в методе столбцов faux (столбец Faux - это просто изображение).

Итак, как мне сделать боковую панель высотой 100%, независимо от того, сколько у меня контента?

Answer 1

Создание позиции боковой панели как «фиксированной», она не зависит от количества содержимого. Я не знаю, если я решить вашу проблему, но надеюсь, что это помогает;)

Вот код:

#sidebar { 
    width: 280px; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    background: blue; } 

Вот fiddle

Answer 2

У вас есть несколько вариантов, но суть заключается в делать с CSS position.

Причина, по которой position: absolute; не работает, потому что для ее работы требуется определенная настройка. Вам нужно отключить прокрутку по классам html, body и wrapper и включить прокрутку в области содержимого.

html, body, wrapper { 
    overflow: hidden; 
} 

.content-area { 
    overflow: auto; 
} 

Вы можете увидеть an example of this here. Это отзывчивый макет боковой панели, который я сделал.

Другой вариант - использовать на боковой панели position: fixed;, как отмечали другие.

Answer 3

Следующая css может быть другая альтернатива для этого

#sidebar { 
    width: 280px; 
    position: fixed; 
    top: 0; 
    height:100%; 
    background: blue; 
} 


#content-area { 
    position:relative; 
    left: 280px; // width of your side box. 
} 

Answer 4

Проверить эту скрипку http://jsfiddle.net/dJ654/2/

Я изменил некоторые стили

#sidebar { 
    width: 10%; 
    height: 100%; 
    position:fixed; 
    right:0px; 
    top:0px; 
    background-color:gray; 

}

#content-area { 
    width: 90%; 
    height: 100%; 
    float: left; 
    background-color:green; 

}