Авто высота div между двумя другими div

0

Я собираюсь сделать боковую панель, как 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.
Контент с динамической высотой, основанный на высоте браузера.

Изображение 174551

любая помощь?

  • 0
    Я думаю, что вам нужны таблицы CSS.
  • 0
    @ bjb568 Не обязательно;)
Показать ещё 1 комментарий
Теги:

2 ответа

2
Лучший ответ

Вы можете просто расположить тело боковой панели абсолютно внутри своего содержащего родителя. Поскольку верхний и нижний колонтитулы являются липкими (я полагаю) и имеют фиксированную высоту, вы можете использовать:

#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 правильно;)

  • 0
    и если я хочу прокрутить содержимое. что я должен установить для максимальной высоты или высоты?
  • 0
    Vmin, кажется, работает лучше, чем VH, и это почти всегда то же самое.
Показать ещё 3 комментария
0

Укажите высоту: 100%; или дать высоту: авто;

Надеюсь, это поможет вам.

  • 0
    Это должно позволить заголовок и нижний колонтитул быть видимым.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню