Scrollbar too long due to bootstrap 4 navbar - html

Question

This is a pretty funky issue.
I'm trying to create an frameless app using electron and bootstrap 4 and wanted to style the app a bit.
After a lot of work, I came by the most odd of issues I have encountered in the entire project.
This is not an electron issue tho (hence the lack of the relevant tag).
You see, I have a header element that is 87px height (to contain the navbar and window controls like maximize and close), with a main element under it that contains the actual content of the page.
<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>
Now I added the following css to my stylesheet:
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;
}
This causes the "regular" scrollbar to be gone from the body and slams it into the main element
Now, here is the funky part.
When I remove the header (display: none) and scroll all the way down this is what I get:
The scrollbar reaches the bottom and says put, the cards show fully with a small padding at the bottom.
Now when I add the header back in again and scroll all the way down, this happens:
The cards don't fully show, there is no padding under it (like in the first screenshot) and the scrollbar scrolls farther than it should scroll.
My question is if anyone knows what is causing this issue and, more importantly, how to solve it.

Answer 1

solved it by adding an 87px thick border on the bottom of the content:
main {
border-bottom: 87px solid #ccc;
}