Question

我正在尝试制作背景色来填充整个页面。我已经在身体中创造了，当我做背景色时：蓝色它不起作用，因为我希望它工作。换句话说，它没有填充整个背景，只有这个div包含的事物的背景。

<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>

背景颜色的作用如下：

Answer 1

我现在无法重现您的问题，所以这是一个猜测：当您在app-root上设置display: block时，它可能会有效，即:host {display: block}

中的app.component.css

我头顶的其他3个解决方案：

1）样式body使用min-height: 100vh代替height: 100%

2）在您的app-root上使用position: absolute，并使用bottom: 0; top: 0; right: 0; left: 0;

填充屏幕

3）在正文上使用display: flex，在你的app-root上使用display: block; flex: 1;

Angular4背景颜色设置

1 个答案: