Angular Material 2 md-sidenav-content does not take up full height

Question

I am using Angular material 2 and I am getting this problem where the md-sidenav-content only takes up the height of the content. However, I want it to be either 100% of the height or the content height (whichever is largest). Note that the parent container which is md-sidenav-container does have the full height that I wanted.

However, at no place in my app I used md-sidenav-content. It seems to be something generated by Angular Material 2 itself. So I cant change the property of it.

With this problem present, I can't get the green background to span the full height.

// app.component.html
<md-sidenav-container>

<!--side nav-->
<md-sidenav #sidenav mode="over" class="app-sidenav">

    <!--header-->
    <div id="side-nav-header">
    <img id="side-menu-logo" src="../assets/images/logo_small.png"> MyApp
    </div>

    <!--body-->
    <a [mdTooltip]="!isCurrentUserExist ? 'Please login first!': ''" [routerLink]="['/create-timesheet']" (click)="sidenav.close()">Timesheet</a>

</md-sidenav>

<br><br>

<!--main content-->
<router-outlet></router-outlet>
</md-sidenav-container>


// login.component.html
<div id="login-container" class="container-fluid">
    <div class="row">
        <div id="login-component" class="col-md-6 offset-md-3">
            <md-card>

                <h2>Login</h2>

                <br>

                <form name="form" [formGroup]="loginForm" (ngSubmit)="onLogin()">

                    <!--email-->
                    <md-input type="email" placeholder="Email" formControlName="email"></md-input>
                    <label class="errorMessage" *ngIf="!loginForm.controls['email'].valid && loginForm.controls['email'].dirty" for="email">
            Email is required</label>

                    <!--password-->
                    <md-input type="password" placeholder="Password" formControlName="password"></md-input>
                    <label class="errorMessage" *ngIf="!loginForm.controls['password'].valid && loginForm.controls['password'].dirty" for="lastName">
            Password is required</label>

                    <br><br>

                    <div class="form-group">
                        <button [disabled]="loading || !loginForm.valid" class="btn btn-primary">Login</button>
                        <a *ngIf="!isLoading" [routerLink]="['/forgot-password']" (click)="onForgotPassword()">forgot password</a>
                    </div>
                </form>
            </md-card>
        </div>
    </div>
</div>


// loging.component.css
#login-container {
    min-height: 100%;
    background-color: green;
}

Answer 1

Try to give

height: 100vh;

to the md-sidenav-container. It will take the viewport height.

If you have a md-toolbar placed outside the md-sidenav-container you can adjust the height of the container itself by substracting the pixels of the md-toolbar (let's say its height is 50px):

height: calc(100vh - 50px);

Answer 2

I was having this issue as well.

Try setting your html and body height to 100% with CSS https://material.angular.io/components/sidenav/overview as recommended in the docs under Sizing the sidenav

Answer 3

similar question and the answers you are looking for can be found here.. Can't get angular2-material md-sidenav to be 100% height

setting height to 100vh instead of 100% is the easiest way to solve this problem.

Answer 4

You can use the fullscreen property on the mat-sidenav-container like this:

<mat-sidenav-container fullscreen>

Answer 5

Set min-height mat-sidenav-container to 100%. Works for me.