Angular app not going full screen

For some reason, the home page of Angular app-to-be is not displaying full screen.

Home component looks like this:

home.component.html

<div id="homeScreen">
  <banner></banner>
  <div>
     Home component works!
  </div>

</div>

home.component.css

#homeScreen {
    /* background-image: url(http://ikteocheckpoint.gr/wp-content/uploads/2015/01/KTEO-CHECKPOINT-BACKGROUND.jpg); */
    background-image:  url(../../../assets/BackgroundImage.jpg);
}

home.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { BannerComponent } from '../dashboard/banner/banner.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  @ViewChild(BannerComponent) banner : BannerComponent;
  constructor() { }

  ngOnInit() {
  }

}

Banner component looks like this:

banner.component.html

<nav>
    <button id="menuButton" (click)="toggleMenuVisible()">
        <div id="menuBars">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </button>
    <a id="pageTitle" routerLink="/home">Open Source Roads</a>
</nav>
<menu *ngIf="menuVisible"></menu>

banner.component.css

nav { 
    text-align: center;
    overflow : hidden;
  }

#menuButton { 
    background-color : black;
    border : 2px solid yellow;
    height : 30px;
    width : 30px;
    padding-left: 5px;
    padding-right: 5px;
    padding: 5px 3px;
    float : left;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#pageTitle { 
    color: white;
    text-decoration: initial;
}

#menuBars { 
    float : right;
}

#menuButton:hover { 
    background-color : white;
}

#menuButton:hover .bar { 
    background-color : black;
}

#menuButton:active { 
    background-color: yellow;
}

#menuButton:active .bar {
    background-color : black;
}

.bar { 
    background-color : white;
    width: 20px;
    height: 2px;
}

.bar + .bar { 
    margin-top: 5px;
    margin-bottom: 5px;
}

#pageTitle {
    font-family: monospace;
    font-size: 3em;
}

banner.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit {

  public menuVisible = false;

  constructor() { }

  ngOnInit() {
  }

  public toggleMenuVisible() { 
    this.menuVisible = !this.menuVisible;
  }

}

Menu component looks like this:

menu.component.html

<nav>
  <div>
    <ul class="menu" class="nav navbar-nav">
      <li><a class="menu-option" routerLink="home">Home</a></li>
      <!-- other menu options here -->
      <li><a class="menu-option" routerLink="about">About</a></li>
      <li><a class="menu-option" routerLink="contact">Contact</a></li>
    </ul>

  </div>
</nav>

menu.component.css

ul {
    list-style: none;
    width: 100%;
    padding-left: 10px;
}

li {
    padding: 20px 10px;
}

.menu-option { 
    float: left;
    width: 110px;
}

The Big Picture

The above code produces the following screen:

enter image description here

Forgive my rustiness with front-end UI development, but how to make this 100% height?