Фиксированная верхняя панель + фиксированная боковая панель по высоте 100%?

Мне интересно, как сделать правильный макет для фиксированной разметки навигационной панели с помощью боковой панели. Что я пытаюсь архивировать:

  1. Исправлена ​​навигационная панель
  2. Фиксированный правый столбец (боковая панель)
  3. Жидкий левый слой (содержание)

Боковая панель

Высота боковой панели всегда составляет 100% от высоты окна, за исключением панели навигации. Когда высота содержимого боковой панели больше высоты боковой панели, мне нужно прокрутить ее содержимое. В конечной точке прокрутки боковой панели (затем боковая панель прокручивается вниз) я хочу, чтобы основной контент начал прокручиваться, и наоборот.

Вот макет:

введите описание изображения здесь

Что у меня сейчас есть: http://jsfiddle.net/MNN28/1/

html,
body {
  width  : 100%;
  height : 100%;
}
body {
  background-color: #f4f4f4;
}
.container {
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.navbar {
  position : fixed;
  height   : 45px;
  width    : 100%;
  z-index  : 9;
}
.main {
  position : absolute;
  top      : 45px;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.main-container {
  overflow : scroll;
  width    : 1200px;
  margin   : 0px auto;
}
.main-container-center {
  width    : 600px;
  height   : 100%;
  float    : left;
  overflow : scroll;
}
.main-container-right {
  position    : fixed;
  width       : 600px; 
  height      : 100%;
  float       : left;
  margin-left : 975px;
  overflow    : scroll;
}

В этой разметке есть две основные проблемы:

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

Как исправить мою разметку, чтобы она работала должным образом? Спасибо.


sidebar css css-position overflow fixed
person f1nn    schedule 14.03.2014    source источник
comment
Итак, если я правильно понимаю, вам нужна липкая боковая панель, которая остается на месте при прокрутке «синего» содержимого?   -  person Kees Sonnema    schedule 14.03.2014

Ответы (1)


arrow_upward
1
arrow_downward

Думаю, это то, что вы описали. Вы можете прокручивать <body> контент, как всегда, и иметь боковую панель с фиксированной максимальной высотой.

http://jsfiddle.net/MNN28/2/

.container {
  width: 100%;
  height: 100%;
}
.navbar {
  position: fixed;
  height: 45px;
  width: 100%;
  background-color: #262626;
  z-index: 9;
}
.main {
  position: relative;
  top: 45px;
  width: 100%;
  bottom:0;
}
.main-container {
  width: 1200px;
  margin: 0px auto;
  background-color: #e9e9e9;
}
.main-container-center {
  width: 600px;
  top: 45px;
  background-color: #e5e5e5;
}
.main-container-right {
  position: fixed;
  background-color: #d9d9d9;
  width: 600px;
  bottom:0;
  margin-left: 600px;
  overflow: auto;
  top: 45px;
}
person Nico O    schedule 14.03.2014
comment
Кажется, работает как положено! И есть ли способ заставить столбцы обрезать содержимое не по нижней строке навигационной панели, а с полем 10 пикселей от навигационной панели при прокрутке? В любом случае, я отмечу ваш вопрос как принятый, спасибо! - person f1nn; 14.03.2014
comment
да, просто играйте со значением top: 45px. 45 пикселей = высота навигационной панели. jsfiddle.net/MNN28/3 - person Nico O; 14.03.2014
comment
заметил странную ошибку - при ширине окна ‹1200 пикселей я получаю горизонтальную прокрутку. Чем меньше ширина страницы, тем больше промежуток между столбцами. Пытался поиграть с переполнениями, но безуспешно. Кажется, причина в фиксированной ширине контейнера. Есть идеи, как это исправить? Спасибо! - person f1nn; 16.03.2014