Javascript 当放大浏览器导致一个div容器展开时，如何调整其他div容器的长度以保持相同的底线？

嗨，我现在正在做一个网页。在这个网页上，我有一个左半部和一个右半部。右边有一个表格视图，左边只有一些按钮。看起来是这样的：

现在看起来不错。但当我把浏览器放大到150%、160%左右时，右边的部分（表格）会因为内容而垂直展开底部。这样地： 因此，您可以看到两个div的底部没有水平对齐

所以我的问题是如何始终保持这一点在同一行。

是的，也许你会说：把所有背景填充成白色，人们就不会意识到这一点但是我需要保持边界线，它们应该在同一条线上。

我当前的代码是这样的（有一些依赖项，但它们只是生成数据的子组件）：

首先，我的html文件：

<div class="container-fluid vuln-content">
  <div class="row">
    <div class="col-2 filter-container">
      <div id="filter-card">
        <app-vuln-filter [currentSelectedTabIndex]="currentSelectedTabIndex"></app-vuln-filter>
      </div>
    </div>
    <div class="col-10">
          <p-tabView (onChange)="onClick($event)" styleClass="vuln-tabs">
            <p-tabPanel *ngFor="let gridConfig of gridTabConfigs" id={{gridConfig.id}} header={{gridConfig.header}}>
              <app-vul-ami-grid [gridConfig]="gridConfig"></app-vul-ami-grid>
            </p-tabPanel>
          </p-tabView>

    </div>
  </div>
</div>

---

也许它需要javascript（我使用angular）来解决它？如果是的话，那绝对没问题。我喜欢学习javascript。

您似乎在使用引导。 在这种情况下，您可以考虑使用FrasBox，它将垂直地和均匀地伸展您的行。 以下是参考链接：

..

你可以试试这个

html

<div id="parent">
<div id="child">Content here</div>
</div>

---

这里的主要要点是，您需要将按钮面板垂直对齐到左侧…

正如@V.Volkov所说，您正在使用引导。但在这种情况下，我想添加更准确的代码。在这里，我在

中添加了

align items-stretch

类，因为

.row

类已经是引导CSS中的

display:flex

。这应该能正常工作：

<div class="container-fluid vuln-content">
  <div class="row align-items-stretch">
    <div class="col-2 filter-container">
      <div id="filter-card">
        <app-vuln-filter [currentSelectedTabIndex]="currentSelectedTabIndex"></app-vuln-filter>
      </div>
    </div>
    <div class="col-10">
          <p-tabView (onChange)="onClick($event)" styleClass="vuln-tabs">
            <p-tabPanel *ngFor="let gridConfig of gridTabConfigs" id={{gridConfig.id}} header={{gridConfig.header}}>
              <app-vul-ami-grid [gridConfig]="gridConfig"></app-vul-ami-grid>
            </p-tabPanel>
          </p-tabView>

    </div>
  </div>
</div>

---

一个糟糕的解决方案是编写一些js以适应调整大小/缩放事件上div的高度，这样它将被强制调整在StackBlitz上创建一个示例，它似乎没有垂直对齐left@HongliBu这里有一个链接，指向CSS中的所有垂直对齐

#parent {display: table}

#child {
display: table-cell;
vertical-align: left;
}

<div class="container-fluid vuln-content">
  <div class="row align-items-stretch">
    <div class="col-2 filter-container">
      <div id="filter-card">
        <app-vuln-filter [currentSelectedTabIndex]="currentSelectedTabIndex"></app-vuln-filter>
      </div>
    </div>
    <div class="col-10">
          <p-tabView (onChange)="onClick($event)" styleClass="vuln-tabs">
            <p-tabPanel *ngFor="let gridConfig of gridTabConfigs" id={{gridConfig.id}} header={{gridConfig.header}}>
              <app-vul-ami-grid [gridConfig]="gridConfig"></app-vul-ami-grid>
            </p-tabPanel>
          </p-tabView>

    </div>
  </div>
</div>

.vuln-content {
  min-height: calc(100vh - 37px);
  //height: calc(100vh - 35px);

  .filter-container {
    margin: 10px 0 0;
    background: #FFFFFF;
  }

  & > div.row {
    margin: 0 0 0 -10px;
    align-items: stretch;
  }
}