html - Angular 应用程序无法全屏显示

Question

由于某种原因，Angular 应用程序的主页没有全屏显示。

Home 组件如下所示：

home.component.html

<div id="homeScreen">
  <banner></banner>
  <div [ngStyle]="{ 'margin-left' : (banner.menuVisible) ? '150px'  : '0'}">
     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() {
  }

}

横幅组件如下所示：

横幅.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>

横幅.component.css

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

menu { 
    height: 100%;
    width: 150px;
    padding: 0;
    margin-top: 0;
    text-align: left;
    z-index : 1;
    background-color: rgb(0, 0, 0);
    position: fixed;
}

#menuButton { 
    background-color : black;
    border : 2px solid yellow;
    height : 30px;
    width : 30px;
    padding-left: 5px;
    padding-right: 5px;
    padding: 5px 3px;
    margin-left: 10px;
    margin-top: 6px;
    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;
}

横幅.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.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;
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-size: 1.5em;
}

.menu-option:hover { 
    color: yellow;
    text-decoration: underline;
}

大局

上面的代码产生以下屏幕：

原谅我对前端 UI 开发的生疏，但是如何做到这个 100% 的高度呢？

更新：我只记得我可以做到

height: 100%;
width: 100%;
position: absolute;

在主组件 ( HomeComponent) 上强制它是全屏的，但这意味着我必须在每个组件上都这样做。此外，在 上执行此操作AppComponent，适用于其子项，例如：

#page-content > *:not(:first-child) { 
    height: 100%;
    width: 100%;
    position: absolute;
}

也不起作用，#page-content > *选择器也不起作用，因为HomeComponent是通过router-outlet.

标签： htmlcssangular