如何将 Bootstrap 4 列的高度限制为另一个列的高度？答案

【问题标题】：How to limit Bootstrap 4 column height to another columns height?如何将 Bootstrap 4 列的高度限制为另一个列的高度？
【发布时间】：2021-08-07 03:22:17
【问题描述】：

我连续有两列。左列有一个固定的高度，由它保存的内容给定height:auto。右列比左列长。 当右列达到左列的高度后，如何溢出？

我已经尝试给出正确的列overflow-y: scroll; max-height: 200px;。但我希望右列自动调整到左列，而不指定基于长度的高度。

Here is my current situation

我还为我的问题创建了一个 JSFiddle here。

我在我的 Angular 项目中使用 Bootstrap 4.6.0。

我的 HTML 代码目前如下所示：

 <div class="row justify-content-center">    
    <div class="col">    
        <mat-list role="list">
            <mat-list-item role="listitem">STATUS: {{statusText}}</mat-list-item>   
            <mat-list-item role="listitem">UserId: {{character?.userId}}</mat-list-item>   
            <mat-list-item role="listitem">CharacterId: {{character?._id}}</mat-list-item>
            <mat-list-item role="listitem">Gender: {{character?.gender}}</mat-list-item>
            <mat-list-item role="listitem">Region Id: {{character?.regionId}} </mat-list-item>
            <mat-list-item role="listitem">
                Region name: {{region?.name}} 
                <button mat-raised-button color="primary" [routerLink]="['/regions', character?.regionId]">Overview</button>
                <button mat-raised-button color="primary" (click)="goToMap(character?.regionId)">Show on Worldmap</button>
            </mat-list-item>
            <mat-list-item role="listitem">City Id: {{character?.cityId}} </mat-list-item>
            <mat-list-item role="listitem">City name: {{city?.name}}</mat-list-item>   
            <mat-list-item role="listitem">HP: {{character?.hp}}</mat-list-item>   
            <mat-list-item role="listitem">Strength: {{character?.strength}}</mat-list-item>   
            <mat-list-item role="listitem">Agility: {{character?.agility}}</mat-list-item>   
            <mat-list-item role="listitem">Intelligence: {{character?.intelligence}}</mat-list-item>   
        </mat-list>
    </div>
    <div class="col"> 
        <div class="row limit">
            <mat-card *ngFor="let log of logs" style="margin-top:10px; width:100%">
                <div class="row">
                        <mat-card-header>
                            <mat-card-title>{{log.action}}</mat-card-title>
                            <mat-card-subtitle>{{log.objectId}}</mat-card-subtitle>
                        </mat-card-header>
                </div>
            </mat-card>
        </div>
        <div *ngIf="logsCurrentPage > 1" class="row justify-content-center">
            <button class='btn-margin' mat-raised-button color="secondary" (click)='loadNextLogPage()'>Load more</button>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css bootstrap-4 angular-ui-bootstrap

【解决方案1】：

我认为这里不可能使用纯 css 方法。您可以使用 Javascript 非常简单地做到这一点。只需获取左列的高度并将右列设置为它的高度即可。

工作小提琴：https://jsfiddle.net/036v75ap/6/

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
 <div class="row">    
        <div class="col" id="left-col" style="background-color:blue">    
          <p>some content in the left column</p>
          <p>some content in the left column</p>
          <p>some content in the left column</p>
        </div>
        <div class="col" id="right-col" style="background-color:red"> 
          <p>some content in the right column</p>
          <p>some content in the right column</p>
          <p>some content in the right column</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
        </div>
    </div>
</body>

#left-col {
  height: fit-content;
}
#right-col {
  overflow-y: scroll;
}

$(document).ready(function(){
  let height = $('#left-col').css('height');
  $('#right-col').css('height', height);
})

【讨论】：

【解决方案2】：

如果您希望右列与左列动态具有相同的高度，那么您可能正在考虑使用一些 JS 或 JQuery 帮助。

参见下面的 sn-p：

var leftHeight = document.getElementById('left-col').clientHeight;
document.getElementById('right-col').style.height = leftHeight + 'px';

#right-col {
  overflow: scroll;
}
.col {
    height: fit-content;
}

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
 <div class="row">    
        <div class="col" id="left-col" style="background-color:blue">    
          <p>some content in the left column</p>
          <p>some content in the left column</p>
          <p>some content in the left column</p>
        </div>
        <div class="col" id="right-col" style="background-color:red"> 
          <p>some content in the right column</p>
          <p>some content in the right column</p>
          <p>some content in the right column</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
          <p style="background-color:green">this should be in the overflow</p>
        </div>
    </div>
</body>

【讨论】：

您的解决方案使用父行的预定义高度。但我想根据其“兄弟”列的高度来限制右列的高度。左列的高度应该基于它所包含的内容（高度：auto）。
“高度”值很难使用 CSS 来控制，因为不同的浏览器和不同的分辨率，所以使用 JS 或 JQuery 函数可以获得动态高度属性。如果您希望兄弟姐妹具有“不同的文本颜色或背景颜色”之类的东西，您可以尝试CSS Combinators