streetflush
@streetflush

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

Добрый день.
Не знаю как правильно сделать деление страницы на блоки.
Сверху фиксированная шапка, слева фильтр с прокруткой, справа грид заполняющий 100% оставшегося места.
Сейчас наколеночное решение выглядит так:
220ab8f2bce9415ba00bcf84f65754db.png
.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;
}


Но идея с отступами меня не очень радует. Возможно есть готовые плагины или решения?
  • Вопрос задан
  • 359 просмотров
Решения вопроса 1
@RadmirZ
Делаем интернет-магазины на движке minicart.su
Пригласить эксперта
Ответы на вопрос 3
alexey-m-ukolov
@alexey-m-ukolov Куратор тега HTML
Ответ написан
Комментировать
sabramovskikh
@sabramovskikh
Можно nanoscroll использовать
Ответ написан
Комментировать
Expany
@Expany
$this->get('skill');
Слева можно сделать высокий див, который будет скролится общим скролом, а статичный просто position:fixed;
Но я не уверен в том насколько правильным будет такой подход.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы