Making the "main" class div to fill the entire page with Razor

Question

My first project with .NET Core Blazor platform is harder than I thought.

Out of the box, the project created the MainLayout.razor file. I am trying to modify the "main" class, so it will fill the whole page, but with no success. Here what I have now:

<div class="main mh-100 p-0" style="background-color:#1100ff">
 <nav class="navbar">
  <label class="navbar-brand">My Project</label>
 </nav>
 <div class="container p-0 align-self-center" style="background-color:#ff99ff">
  <div class="content">
   @Body
  </div>
 </div>
</div>

I thought mh-100 is supposed to force the max-height to 100%. Any help is greatly appreciated and I apology in advance if there's already another similar question out there.

Answer 1

So this is not a blazor issue and has nothing to do how blazor works, but if a correct css style is applied it will fix your issue. What you have to do is apply the height of your screen. Take a look at what css units are and what will work best for you: https://www.w3schools.com/cssref/css_units.asp

In your case, you need the height of viewport:

div {
    height: 100vh;
}

Example: https://codepen.io/umair_me/pen/oNxovxX

In bootstrap you can use min-vh-100 or vh-100 for bootstrap 4.2+ versions. More details here