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

Posted 2023-03-05

【中文标题】当放大浏览器导致一个 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?

【发布时间】：2020-11-29 14:37:38

【问题描述】：

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

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

【问题讨论】：

一个肮脏的解决方案是写一些js来适应resize/zoom事件上div的高度，以便它被强制适应

在 stackblitz 上创建一个示例

【参考方案1】：

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

【参考方案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没有离开

@HongliBu 这里是 CSS 中所有垂直对齐的链接 w3schools.com/cs-s-ref/pr_pos_vertical-align.asp

【参考方案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;