Bootstrap прокручивает только div и сохраняет другой контент сверху

Немного похоже на facebook. У меня 4 столбца, и я хочу, чтобы этот прокрутка работала только над одним из этих содержимого столбцов.

Я читал arround, что я должен установить высоту тела на 100%, а затем исправить высоту на этом div, который я хочу прокрутить. Пока нет успеха.

Ответы

Ответ 1

Чтобы прокрутить div вместе со страницей, когда пользователь прокручивает, используйте

.col-lg-6 {
  position:fixed;
}

Чтобы содержимое в этом столбце прокручивалось, используйте

.col-lg-6 {
  height: 200px; // Set this height to the appropriate size
  overflow-y: scroll; // Only add scroll to vertical column
}

Если это не решит вашу проблему, обновите свой вопрос и уточните его.:)

"Я читал arround, что я должен установить высоту тела на 100%, а затем исправить высоту на этом div, который я хочу прокрутить" - вам не нужно иметь 100% роста, чтобы получить эту работу, Тем не менее, вы должны иметь статическую высоту в столбце, если вы хотите, чтобы содержимое внутри прокручивалось. Если вы просто хотите, чтобы столбец был зафиксирован на странице, как сказано в первом из моих двух предложений, вам не нужна указанная высота. Вот почему он только написан во втором решении.

Ответ 2

Вы не должны переопределять эксплойты классов Bootstrap, скорее добавьте класс в свой div и стиль, который:

<div class="col-lg-12"> 
   <div class="col-lg-2"></div> 
   <div class="col-lg-6 h-scroll"></div>
   <div class="col-lg-1"></div>
   <div class="col-lg-3"></div>
</div>

Тогда ваш css будет выглядеть так:

.h-scroll {
    height: 90vh; /* %-height of the viewport */
    position: fixed;
    overflow-y: scroll;
}

Если вы хотите имитировать Facebook, лучше использовать единицы просмотра (vh, vw вместо жесткой настройки высоты в пикселях. Вы можете проверить совместимость .