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背景顏色設置

回答

相關問題