Как предотвратить увеличение размера строки до полной высоты страницы при переполнении элементов?

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я пытаюсь создать страницу с помощью Bootstrap (4), содержащую 3 строки, которые всегда были бы видны на странице, но всякий раз, когда я добавляю элементы в столбец средней строки, если они переполнены, вся строка увеличивается в высоту до полной страницы, таким образом, переполняя другие строки на странице.

Есть ли способ предотвратить это?

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

Вот суть кода, над которым я работал.

 html,
body {
  height: 100%;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid h-100 d-flex flex-column">
  <div class="row h-100" style="background-color: grey;">
    top<br>
  </div>
  <div class="row h-100" style="background-color: yellow;">
    <div class="col-lg-9 h-100" style="overflow-y: auto;">
      somethign1<br> somethign2
      <br> somethign3
      <br> somethign4
      <br> somethign5
      <br> somethign6
      <br> somethign7
      <br> somethign8
      <br> somethign9
      <br> somethign10
      <br> somethign11
      <br> somethign12
      <br> somethign13
      <br> somethign14
      <br> somethign15
      <br> somethign16
      <br> somethign17
      <br> somethign18
      <br> somethign19
      <br> somethign20
      <br> somethign21
      <br> somethign22
      <br> somethign23
      <br> somethign24
      <br> somethign25
      <br> somethign26
      <br> somethign27
      <br> somethign28
      <br> somethign29
      <br> somethign30
      <br> somethign31
      <br> somethign32
      <br>
    </div>
    <div class="col-lg-1 h-100 bg-danger"></div>
    <div class="col-lg-2 bg-primary h-100">s1<br>s2<br></div>
  </div>
  <div class="row h-100" style="background-color: green;">
    bottom<br>
  </div>
</div>

Ответ №1:

Поскольку вы не установили переполнение строки, оно просто показывает все. Вы можете добавить

 div.row {
  overflow: auto;
}

Пожалуйста, проверьте следующее решение

 html,
body {
  height: 100%;
}

div.row {
  overflow: auto;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid h-100 d-flex flex-column">
  <div class="row h-100" style="background-color: grey;">
    top<br>
  </div>
  <div class="row h-100" style="background-color: yellow;">
    <div class="col-lg-9 h-100" style="overflow-y: auto;">
      somethign1<br> somethign2
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br> somethign3
      <br> somethign32
      <br>
    </div>
    <div class="col-lg-1 h-100 bg-danger"></div>
    <div class="col-lg-2 bg-primary h-100">s1<br>s2<br></div>
  </div>
  <div class="row h-100" style="background-color: green;">
    bottom<br>
  </div>
</div>