如何只让一个 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（红色）增加内容并占用更多高度。 nav 也应该效仿并随着内容 div 的增长而增长。

但是，导航有时也会变得很大。问题是它迫使用户滚动将内容传递到导航的底部。我宁愿它听内容的高度并使用滚动条进行任何溢出。

我应该如何设置我的 css，以便内容 div 可以在导航锁定到内容 div 的高度并使用滚动条进行溢出时尽可能多地增长整个 flex 容器？

我试过了：

• 为父容器设置最大高度。它不限制导航 div

• 为导航 div 设置最大高度。我找不到让它与内容 div 匹配的值。

• 使用对齐项：flex-start。这只会阻止内容 div 的增长，但用户仍然需要经过内容 div 到导航的底部。我希望将重点放在内容上，因此如果导航栏大于内容 div，则导航栏应使用滚动条。

谢谢！

Answer 1

您只需为每个 div 添加相同的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>

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

在左列中使用另一个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