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

Question

您好，我现在正在制作一个网页。在页面中，我有一个左侧部分和右侧部分。右边部分有一个表格视图，左边部分只是一些按钮。它看起来像这样：

现在看起来不错。但是当我将浏览器放大到 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>

我使用了一些primeng工具，比如table，tab ..你可以看到'col-2'部分是左边，'col-10'部分是右边。

我也有 css 文件，有点琐碎：

.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;
  }
}

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

Answer 1

您似乎正在使用 Bootstrap。 在这种情况下，您可以考虑使用 flexbox，它将垂直且均匀地拉伸您的行。 以下是参考链接： https://getbootstrap.com/docs/4.4/utilities/flex/#align-items <div class="d-flex align-items-stretch">...</div>

Answer 2

你可以试试这个……

html

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

CSS

#parent {display: table}

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

这里的主要内容是您需要将按钮面板向左垂直对齐...

Answer 3

正如@V.Volkov 所说，您正在使用 Bootstrap。但在这种情况下，我想添加更准确的代码。这里我在<div class="row"> 中添加了align-items-stretch 类，因为.row 类在Bootstrap 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>

或者您可以在 CSS 中手动设置 align-items: stretch;。

.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;
  }
}