css - 如何防止在我的 Angular 组件 View 中出现垂直滚动条？

Question

您好，我有一个 Angular 分量。我在我的组件 View 中使用 Bootstrap 表。但是，有时当我调整网页大小时，我会看到它显示两个滚动条。我怎样才能防止内部滚动条。

这是我的组件scss文件

@import './../../../scss/mixins';
@import './../../../scss/variables';

label {
  @include pc-form-label;
}

.required::after {
  @include pc-required-asterisk;
}


.form-control {
    min-height: $min-form-input-height;
}

.search-form-background {
  background-color: $pc-search-bg-color;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding-top: 2px;
  padding-right: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
}

.search-msisdn {
    background-color: $pc-search-bg-color;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    background-color: #cccccc;
    border-radius: 18px;
  }

这是组件html页面

<pc-header [heading]="'HEADINGS.MESSAGE_HISTORY_REPORTING' | translate" icon="history">

  </pc-header>
  <form novalidate [formGroup]="formGroup" (ngSubmit)="handleSubmit(formGroup.value)"> 

    <div class="row">

      <div class="col-3">
        <pc-form-field>
          <pc-date-picker [range]="true" formControlName="range" [placeholder]="'LABELS.DATE_RANGE' | translate"></pc-date-picker>
        </pc-form-field>
      </div>

      <div class="col-2">
          <select class="custom-select" formControlName="cdrStatus">
            <option [value]="" disabled>{{ 'LABELS.CDR_STATUS' | translate }}</option>
            <option *ngFor="let key of cdrStatusKeys" [value]="key"> {{ cdrStatuses[key] }} </option>
          </select>
      </div>

      <div class="col-2">
          <pc-form-field>
          <input formControlName="msisdn" type="text" placeholder="{{ 'PLACEHOLDERS.MSISDN' | translate }}">
          </pc-form-field>
        </div>

      <div class="col-3">
          <select class="custom-select" *ngIf="isGlobalAdmin" formControlName="account">
              <option [value]="null" disabled>{{ 'PLACEHOLDERS.ACCOUNT_NAME' | translate }}</option>
              <option *ngFor="let account of accounts" [value]="key"> {{ account.name }} </option>
            </select>
      </div>

      <div class="col-2 text-right">
          <pc-button theme="primary" [disabled]="formGroup.invalid" type="submit"> 
              {{ 'ACTIONS.RUN_REPORT' | translate }}
          </pc-button>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <pc-form-field>
            <select formControlName="campaign">
                <option value="" disabled> {{ 'PLACEHOLDERS.SELECT_CAMPAIGNS' | translate }}  </option>
                <option *ngFor="let campaign of campaigns" [ngValue]="campaign.id">
                  {{ campaign.name }}
                </option>
              </select>
            </pc-form-field>
        </div>
        <div class="col-2">
            <pc-form-field>
            <select formControlName="inventory"> 
                <option value="null" disabled> {{ 'PLACEHOLDERS.SELECT_INVENTORIES' | translate }} </option>
                <option *ngFor="let inventory of inventories" [ngValue]="inventory">
                  {{ inventory.label }}
                </option>
              </select>
            </pc-form-field>
        </div>

        <div class="col-4">
            <pc-form-field>
            <select formControlName="flight">
                <option value="null" disabled> {{ 'PLACEHOLDERS.SELECT_FLIGHTS' | translate }} </option>
                <option *ngFor="let flight of flights" [ngValue]="flight"> {{ flight.name }}
                </option>
              </select>
            </pc-form-field>
        </div>

        <div class="col-2 text-right">
            <pc-button theme="primary"  (click)="generateCSV(formGroup.value)">
                <i class="fas fa-download mr-2"></i>
                {{ 'ACTIONS.CSV' | translate }}
            </pc-button>
          </div>
    </div>

 </form> 

 <pc-spinner [standalone]="true" *ngIf="isLoading && isInnerLoading"></pc-spinner>

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Time</th>
        <th scope="col">To</th>
        <th scope="col">From</th>
        <th scope="col">Campaign</th>
        <th scope="col">Flight</th>
        <th scope="col">Status</th>
        <th scope="col">Error Code</th>
        <th scope="col">Message Text</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of messageHistories | paginate: { itemsPerPage: 10, currentPage: pageNumber, totalItems: totalHits }">
        <td> {{ item['@timestamp'] }} </td>
        <td> {{ item['recipient'] }} </td>
        <td>{{ item['sender'] }} </td>
        <td>{{ item['campaign_name'] }} </td>
        <td>{{ item['flight_name'] }} </td>
        <td>{{ item['status'] }}  </td>
        <td>{{ item['o_error'] }} </td>
        <td>{{ item['msg_text'] }}</td>
      </tr>
     </tbody>
     </table>
  </div>   


<pagination-controls (pageChange)="pageChanged($event, formGroup.value)" ></pagination-controls>

表格是使用 Bootstrap 样式 table-responsive、table 和 table-hover 呈现的。我应该怎么做才能解决这个问题。我对 css3 很陌生，什么都不懂

非常感谢任何帮助 谢谢

Answer 1

我无法从您的代码中获取输出。但是，我猜你对“消息历史报告” block 给予了固定的重视。那个 block 的代码或其他地方你给 CSS 代码 overflow-y: scroll;适用于此 block 。

如果发生这种情况，请尝试提供 CSS，

height:auto;

如果这不起作用，请从“开发人员工具”检查该 div CSS，并从哪里检查代码，即 overflow-y: scroll;应用于div或那个 block ，然后删除该代码或将代码替换为overflow-y:hidden；根据您的网站情况。