Я собираюсь сделать боковую панель, как Google+ или боковая панель Facebook.
боковая панель position:fixed; left:0; top:0; bottom:0; width: 250px
position:fixed; left:0; top:0; bottom:0; width: 250px
направо position:fixed; left:0; top:0; bottom:0; width: 250px
position:fixed; left:0; top:0; bottom:0; width: 250px
и имеет:
Заголовок с высотой 50 пикселей
Нижний колонтитул с высотой 50px.
Контент с динамической высотой, основанный на высоте браузера.
любая помощь?
Вы можете просто расположить тело боковой панели абсолютно внутри своего содержащего родителя. Поскольку верхний и нижний колонтитулы являются липкими (я полагаю) и имеют фиксированную высоту, вы можете использовать:
#sidebar-content {
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
/* or width: 100%; if you don't want to use the left/right positions */
}
Вы можете увидеть скрипку с доказательством концепции: http://jsfiddle.net/teddyrised/2r4r6/
Изменить: если вы чувствуете себя авантюрно, вы можете установить высоту содержимого боковой панели, используя calc(100vh - 100px);
, но старые браузеры, а также iOS Safari имеют проблемы с вычислением vh
правильно;)
Укажите высоту: 100%; или дать высоту: авто;
Надеюсь, это поможет вам.