Как организовать разметку страницы: левая часть со скролом, правая статическая?

Question

[Alex]

Добрый день.
Не знаю как правильно сделать деление страницы на блоки.
Сверху фиксированная шапка, слева фильтр с прокруткой, справа грид заполняющий 100% оставшегося места.
Сейчас наколеночное решение выглядит так:

.main-body-grid {
  margin-top:120px;
  position:relative;
}

.main-body-grid > .grid-left,
.main-body-grid > .grid-right {
  padding: 0;

}

.main-body-grid > .grid-left {
  position:fixed;
  top:120px;
  bottom:0;
 
  overflow:auto;

}

.main-header-grid > .grid-left,
.main-body-grid > .grid-left {
  width:350px;
}

.main-header-grid > .grid-right,
.main-body-grid > .grid-right {
  margin-left:360px;
  position:relative;
}

.main-header-grid > .grid-left {
  float:left;
}

.main-body-grid .side-navigation {
  position:relative;
}

.main-body-grid .side-navigation.ng-hide {
  display:block!important;
}

Но идея с отступами меня не очень радует. Возможно есть готовые плагины или решения?

Answer 1

[Радмир]

тут такая materializecss.com/getting-started.html

Comments

[Alex]

тут как раз то что в приведенном выше css. с отступами.

[WTERH]

Как раз сам пользую эту классную штуку

[WTERH]

streetflush: nanoscroll приведенный выше, кстати отличный вариант!

Answer 2

[Алексей Уколов]

foundation.zurb.com/apps

Answer 3

[Сергей]

Можно nanoscroll использовать

Answer 4

[WTERH]

Слева можно сделать высокий див, который будет скролится общим скролом, а статичный просто position:fixed;
Но я не уверен в том насколько правильным будет такой подход.

Comments

[Alex]

Будет смотреться криво, проверял)

[WTERH]

streetflush: пруф?

[WTERH]

streetflush: Да и помнится если вложить див высокий в див с position:fixed; то у высокого дива появится свой скролл.
В прочем, в сети наверняка есть не менее 5 плагинов для таких целей.