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

Question

嗨，我现在正在处理一个 webpage.In 页面，我有左边部分和右边部分。右侧部分有一个 table 视图，左侧部分只有一些按钮。它看起来像这样：

现在看起来不错。但是当我将浏览器放大到 150%、160%...时，右侧部分 (table) 将由于内容而垂直扩展其底部。像这样：所以可以看到下面两个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，它会垂直均匀地拉伸您的行。这里是 link 参考： 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;
}

这里的主要内容是您需要 vertical-align 按钮面板离开...

Answer 3

正如@V.Volkov所说，你正在使用Bootstrap。但在这种情况下，我想添加更准确的代码。这里我在<div class="row">中添加了align-items-stretchclass，因为.rowclass已经是Bootstrap[=22中的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;
  }
}

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

when zoom in browser cause one div container expand, how to adjust other div container length to keep the at a same bottom line?

html

javascript

css

primeng

angular