我正在尝试制作一种背景颜色来填充整个页面。我在 body 中创建了，当我在做 background-color: blue 时，它没有像我希望的那样工作。换句话说，它不会填充整个背景，而只会填充此 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>
背景颜色作用如下:
最佳答案
我现在无法重现您的问题，所以这是一个猜测:
当您在 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 填充屏幕；顶部:0；右:0；左:0；
3) 在 body 和 display: block 上使用 在你的 app-root 上display: flex； flex: 1;
关于html - Angular4 背景颜色设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45619159/