Как дать только один Bootstrap столбец контроля над высотой

Question

В настоящее время у меня есть макет страницы, в котором один столбец представляет навигацию, а другой - контент.

.bg-1{
  background-color:orange;
  height: 400px;
  overflow-y: auto;


}
.bg-2{
  background-color: red;
  height: 200px

}
.row{
  align-items:flex-start;
}

<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-3 bg-1'>
    Nav<br/>
    Hello<br/>
    Hello<br/>
    Hello<br/>
    I need a scrollbar!<br/>
    And only be as tall as my red neighbor!
    
    
    </div>
    <div class='col-9 bg-2'>Content<br/>I can be as tall as I want!</div>
  
  
  </div>




</div>

Теперь я не возражаю против увеличения содержимого div (красного цвета) и увеличения его высоты. Навигация также должна следовать примеру и расти вместе с содержимым div.

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

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

Я пытался:

• Установка максимальной высоты для родительского контейнера. Он не ограничивает навигационный блок

• Установка максимальной высоты навигационного блока. Я не могу найти значение, которое позволяет ему соответствовать содержимому div.

• Использование align-items: flex-start. Это только останавливает увеличение содержимого div, но пользователю все равно приходится проходить мимо содержимого div внизу навигационной панели. Я хочу сфокусироваться на контенте, поэтому панель навигации должна использовать полосу прокрутки, если она больше, чем div контента.

Спасибо!

Answer 1

Способ сделать это, используя другой div внутри левого столбца. Внутренний div должен быть position:absolute ...

Демо: https://codeply.com/p/TvjnlB0BTj

.bg-1{
  background-color:orange;
}

.bg-2{
  background-color: red;
}

<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-3 bg-1 overflow-auto'>
            <div class="position-absolute">
            Nav<br /> 
            Hello<br /> 
            Hello<br /> 
            Hello<br /> 
            Hello<br /> 
            Hello<br /> 
            Hello<br /> 
            Hello<br /> 
            Hello<br /> 
            Hello<br /> 
            I need a scrollbar!<br /> 
            And only be as tall as my red neighbor!
                        
            </div>
        </div>
        <div class='col-9 bg-2'>
            Content<br />I can be as tall as I want!
            <p>Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings 
flannel Brooklyn literally small batch, mumblecore PBR try-hard kale chips. Brookch-key Odd Future. Austin messenger bag normcore, 
Helvetica Williamsburg sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
            <p>Tattooed Codeply Echo Park Goda taxidermy Vice.</p>
        </div>
    </div>
</div>

https://codeply.com/p/TvjnlB0BTj

Answer 2

Я думаю, что это невозможно с CSS, поэтому я использовал JS здесь

function divHeight() {
  let orgHeight = $('.right').height();
  let currentHeight = $('.left');
  $(currentHeight).css('height', orgHeight);
}

window.onload = function() {
  divHeight();
};

$(window).resize(function() {
  divHeight();
});

.bg-1 {
  background-color: orange;
  overflow: auto;
}

.bg-2 {
  background-color: red;
  height: 200px
}

.row {
  align-items: flex-start;
}

<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-3 bg-1 left'>
      Nav<br/> Hello
      <br/> Hello
      <br/> Hello
      <br/> I need a scrollbar!<br/> And only be as tall as my red neighbor!
    </div>
    <div class='col-9 bg-2 right'>Content<br/>I can be as tall as I want!</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

Answer 3

вам просто нужно добавить один и тот же height для каждого деления.

Попробуйте это:

#div1{
  background-color:orange;
  height: 300px;
}

#div2{
  background-color: red;
  height: 300px;
}
.row{
  align-items:flex-start;
}
 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>

  <div class='row'>
    <div id="div1" class='col-3'>
    Nav<br/>
    Hello<br/>
    Hello<br/>
    Hello<br/>
    I need a scrollbar!<br/>
    And only be as tall as my red neighbor!
    
    
    </div>
    <div id="div2" class='col-9'>Content<br/>I can be as tall as I want!</div>
  
  
  </div>




</div>