Angular4背景颜色设置

我想让背景颜色填充整个页面。我已经在身体中创建了，当我在做背景色时：蓝色它不工作，因为我想让它工作。换句话说，它并没有填充整个背景，而只是这个div包含的东西的背景。Angular4背景颜色设置

<body [ngStyle]="{'height': '100%', 'margin': '0'}"> 
    <!-- App-root represents the html code below <div [ngStyle} and so on --> 
    <app-root></app-root> 
</body> 

<div [ngStyle]="{'background-color' : 'blue', 'height': '100%'}"> 
<header> 
    <nav class="navbar navbar"> 
     <div class="container-fluid"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a routerLink="">Strona Główna</a></li> 
      <li><a routerLink="/repertuar">Repertuar</a></li> 
     <li><a routerLink="/ofirmie">O Firmie</a></li> 
     <li><a routerLink="/kontakt">Kontakt</a></li> 
     </ul> 
    </div> 
    </nav> 
    </header> 
<router-outlet></router-outlet> 
</div>

背景颜色充当如下：

来源

2017-08-10 Trefl

类似的问题已被询问此处https://stackoverflow.com/questions/20220781/fill-the-entire-header-background-with-color – Napior

不幸的是，即使我添加填充后，答案根本没有帮助我：（ – Trefl

您是否检查过网页上的元素？他们的高度实际上是否填满了窗户的整个高度？ –

我无法重现您的问题，现在，这里有一个猜测：当你在应用程序根目录设置display: block它可能工作，即你的app.component.css

3其他解决方案:host {display: block}从我的头顶：

1）风格body与min-height: 100vh代替height: 100%

2）对您的应用程序根使用position: absolute并使其填满屏幕与bottom: 0; top: 0; right: 0; left: 0;

3）在您的应用程序根

使用 display: flex对身体和 display: block; flex: 1;

来源

2017-08-10 18:24:40 j2L4e

Angular4背景颜色设置

回答

相关问题