如何将 Bootstrap 4 列高度限制为另一列高度？

Question

我有两列连续。左边的列有一个由它包含的内容给定的固定高度 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>

Answer 1

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

查看下面的代码片段：

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>

Answer 2

我认为这里不可能使用纯 css 方法。您可以使用 Javascript 非常简单地完成此操作。只需获取左列的高度并将右列设置为它的高度。

工作Fiddle：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);
})

如何将 Bootstrap 4 列高度限制为另一列高度？

How to limit Bootstrap 4 column height to another columns height?

html

css

angular-ui-bootstrap

bootstrap-4