时间戳

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

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>

我使用了一些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（我使用角度）来解决它？如果是这样，绝对没问题。我喜欢学习javascript。

标签： javascripthtmlcssangularprimeng

解决方案

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

推荐阅读