Bootstrap блок со 100% высотой

Альтернативный подход к предотвращению скольжения элемента влево состоит в том, чтобы изменить дизайн макета, первоначально разделив навигацию и столбец элементов, а также вложив элементы внутрь столбца элементов.

<div class = "container">
  <div class = "row">
    <div class = "navigation col-lg-4"></div>
    <div class = "col-lg-8">
      <div class = "row">
        <div class = "item col-lg-12"></div>
        <div class = "item col-lg-12"></div>
        <div class = "item col-lg-12"></div>
        <div class = "item col-lg-12"></div>
      </div>
    </div>
  </div>
</div>

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

Вы очень хорошо знаете, что в Bootstrap у нас есть 12 столбцов подряд, теперь вы сначала используете col-lg-4, а затем используете col-lg-8, так что всего 4 + 8 = 12. теперь со второго col-lg-8 он начинается с первого, и снова вы используете col-lg-8 означает, что он не может корректироваться в пространстве после второго col-lg-8 в вашем коде, поэтому третий col-lg-8 также помещается на начальный край.

Итак, теперь вам нужно создать структуру сетки, как показано ниже:

<div class = "container">
  <div class = "row">
    <div class = "navigation col-lg-4"></div>
    <div class = "item-list col-lg-8">
      <div class = "item"></div>
      <div class = "item"></div>
      <div class = "item"></div>
    </div>
  </div>
</div>

Не могли бы вы проверить приведенный ниже код? Надеюсь, это сработает для вас. Мы дали min-height: 100vh навигации, чтобы она автоматически принимала высоту окна. Мы также сделали row гибким макетом, чтобы при увеличении высоты content-section высота навигации оставалась равной разделу содержимого.

Пожалуйста, перейдите по этой ссылке https://jsfiddle.net/yudizsolutions/mvkq17wn/18/

.main-row { 
  display: flex;
  display: -webkit-flex;
}

.navigation {
   min-height: 100vh;
}

.content-section .item { 
  height: 200px;
}

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "container">
  <div class = "row main-row">
    <div class = "navigation bg-primary col-lg-4">Navigation</div>
    <div class = "content-section bg-info col-lg-8">
      <div class = "item">Item 1</div>
      <div class = "item">Item 2</div>
      <div class = "item">Item 3</div>
    </div>
  </div>
</div>