由于引导程序 4 导航栏，滚动条太长

Question

这是一个非常时髦的问题。 我正在尝试使用 electron 和 bootstrap 4 创建一个无框架应用程序，并希望对应用程序进行一些样式设置。
经过大量的工作，我遇到了整个项目中遇到的最奇怪的问题。
这不是电子问题（因此缺少相关标签）。

你看，我有一个高度为87px 的标题元素（包含导航栏和窗口控件，如最大化和关闭），它下面有一个main 元素，包含页面的实际内容。

<header>
  <div class="window-control bg-primary">
    <button class="btn btn-primary btn-sm float-right" (click)="exitApp()"><fa-icon [icon]="faTimes"></fa-icon></button>
    <button class="btn btn-primary btn-sm float-right" *ngIf="isMaximized" (click)="unmaximizeWindow()"><fa-icon [icon]="faMinusSquare" ></fa-icon></button>
    <button class="btn btn-primary btn-sm float-right" *ngIf="!isMaximized" (click)="maximizeWindow()"><fa-icon [icon]="faPlusSquare" ></fa-icon></button>
    <button class="btn btn-primary btn-sm float-right" (click)="minimizeWindow()"><fa-icon [icon]="faMinus"></fa-icon></button>
  </div>

  <nav class="navbar navbar-expand navbar-dark bg-secondary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <span class="text-primary font-weight-bold">9</span>AnimeDl
      </a>
      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0 mr-2">
        <div class="input-group">
          <input class="form-control bg-secondary border-0 text-center" aria-describedby="basic-addon1" type="search" placeholder="Search" aria-label="Search" #search (keyup)="searchChange(search.value)">
          <div class="input-group-append">
            <button class="btn btn-outline-primary bg-secondary text-white" type="button">
              <fa-icon [icon]="faSearch"></fa-icon>
            </button>
          </div>
        </div>
      </form>
      <button class="btn btn-primary" (click)="doDonate()">Donate</button>
    </div>
  </nav>
</header>

<app-donate-modal *ngIf="nagDonation"></app-donate-modal>
<app-waf-captcha *ngIf="_9anime.isWafActive" [siteKey]="_9anime.siteKey"></app-waf-captcha>

<main [hidden]="!isBusy" class="container-fluid bg-gray-dark">
  <div class="content">
    <app-loading-spinner></app-loading-spinner>
  </div>
</main>

<main [hidden]="isBusy" class="container-fluid bg-gray-dark">
  <router-outlet></router-outlet>
</main>

现在我在样式表中添加了以下 CSS：

body {
  overflow: hidden;
  height: 100%;
}

main {
  height: 100%;
  padding-top: 25px;
  position: absolute;
  overflow-y: scroll;
}

.window-control {
  height: 31px;
  -webkit-app-region: drag;
  -webkit-user-select: none;

  button {
    -webkit-app-region: none;
  }
}

::-webkit-scrollbar {
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: map-get($theme-colors, "gray-dark");
}

::-webkit-scrollbar-thumb{
  background: map-get($theme-colors, "primary");
}

::-webkit-resizer {
  display: none;
}

这会导致“常规”滚动条从 body 消失，并将其猛烈撞击到 main 元素中

现在，这是时髦的部分。 当我删除标题 (display: none) 并一直向下滚动时，这就是我得到的： 滚动条到达底部并说放置，卡片完全显示，底部有一个小填充。 现在，当我再次添加标题并一直向下滚动时，会发生这种情况：

卡片未完全显示，其下方没有填充（如第一个屏幕截图所示），并且滚动条滚动的距离超过了应滚动的距离。

我的问题是，是否有人知道是什么导致了这个问题，更重要的是，如何解决它。

Answer 1

通过在内容底部添加87px 粗边框解决了这个问题：

main {
    border-bottom: 87px solid #ccc;
}