I recently created a landing page using the HTML code provided below.
Additionally, I have taken the time to prepare a bootply example that illustrates how the pink div extends too far and fails to cover the entire screen as intended. You can view this demonstration here.
The issue I am facing relates to a pink section on the page that is supposed to adjust its size to fill the available space in the browser without causing a scrollbar to appear.
It seems that the height of the header and breadcrumb elements is not being properly accounted for in the overall layout calculation.
- The
headingis contained within a flexcol, - The
.breadcrumbelement also uses flex properties.
As a result, the page ends up displaying a scrollbar due to the combined height of the heading and breadcrumb area.
<app-dashboard>
<div class="app-body">
<main class="main">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#/">Home</a>
</li>
<li class="breadcrumb-item active">
<span tabindex="0">Property Locations</span>
</li>
</ol>
<div class="container-fluid d-flex h-100">
<router-outlet></router-outlet>
<ng-component class="d-flex flex-grow w-100">
<div class="row w-100">
<div class="col">
HEADING
</div>
<div class="d-flex flex-grow bg-pink-300 h-100 w-100">
THIS SHOULD GROW, BUT NOT CREATE A SCROLLBAR
</div>
</div>
</ng-component>
</div>
</main>
</div>
<footer class="app-footer">
<span>
<a href="..."></a>Pander.</span>
<span>
<i class="fa fa-fw fa-code-fork"></i>
</span>
</footer>
</app-dashboard>
The CSS I am using for flex-grow is:
.flex-grow {
flex: 1 0 auto;
}