Исправить два раздела на месте в HTML / CSS / Bootstrap

Question

Я разделил всю веб-страницу на 3 секции: левую, среднюю и правую. Я использую bootstrap, поэтому левая и правая части были назначены по 3 столбца, а средняя - 6. Мне нужна только прокрутка средней части, а две другие нет.

Я знаю, что есть CSS функциональность позиции: исправлено. Но это заставляет мою левую и правую часть перекрываться. Есть ли способ их исправить, кроме явного присвоения ему позиции путем определения левых и правых атрибутов CSS? Так как я могу внести изменения в будущем, я sh что-то более автоматическое c.

Заранее спасибо!

Answer 1

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

click this link [https://codepen.io/Dineshdmr/project/editor/AOgeVv#0][1]

Answer 2

• Вам необходимо установить height для middle section.
• Здесь я установил 500px, но вы можете изменить его в соответствии с вашими требованиями.
• Установите overflow-y на div, в котором вы установили height, чтобы он мог иметь вертикальную прокрутку.
• Я прокомментировал строку, если вам нужна полная высота страницы. это просто для справки.
• Класс .bg просто для демонстрации примера. Вы можете удалить его.

.scrollable {
  /*height: calc(100vh - 30px);*/
  height: 500px;
  overflow-y: auto;
}
.bg {
  background-color: antiquewhite;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-3 bg">
      Left Section
    </div>
    <div class="col-lg-6">
      <div class="scrollable">
        <p>Port-salut parmesan mozzarella. Airedale blue castello blue castello fromage frais mascarpone smelly cheese pepper jack paneer. Chalk and cheese cheese and biscuits caerphilly boursin pecorino emmental cow dolcelatte. Cauliflower cheese cut the cheese stilton cheesecake cream cheese manchego chalk and cheese port-salut. Cheese triangles when the cheese comes out everybody's happy cheese and biscuits port-salut.</p>

<p>Bocconcini brie dolcelatte. Manchego danish fontina st. agur blue cheese cream cheese paneer gouda who moved my cheese say cheese. Cheese strings hard cheese bocconcini cheesy grin croque monsieur cheese slices fondue danish fontina. Cheddar fondue fromage halloumi cream cheese.</p>

<p>Gouda ricotta cow. Babybel the big cheese cut the cheese mascarpone cottage cheese swiss the big cheese taleggio. Caerphilly smelly cheese macaroni cheese cheeseburger bocconcini red leicester parmesan macaroni cheese. Cheese strings camembert de normandie stilton mascarpone cow parmesan cheese and biscuits melted cheese. Rubber cheese cheese triangles.</p>

<p>Bocconcini dolcelatte cream cheese. Boursin hard cheese fondue danish fontina everyone loves cow fromage parmesan. Babybel halloumi cream cheese swiss cow smelly cheese boursin cow. Melted cheese stinking bishop cheese on toast who moved my cheese who moved my cheese cheesy grin manchego cheese slices. Emmental goat manchego cheddar.</p>

<p>Roquefort stinking bishop everyone loves. Smelly cheese monterey jack edam gouda cheese and wine cheddar who moved my cheese edam. Cow jarlsberg who moved my cheese babybel gouda everyone loves st. agur blue cheese emmental. Blue castello goat swiss airedale cream cheese mozzarella dolcelatte brie. Blue castello danish fontina lancashire rubber cheese.</p>
      </div>
    </div>
    <div class="col-lg-3 bg">
      Right Section
    </div>
  </div>
</div>

Запустите фрагмент в полноэкранном режиме, чтобы получить лучшее представление.