gpt4 book ai didi

html - Angular4 背景颜色设置

转载 作者:行者123 更新时间:2023-11-28 03:12:54 25 4
gpt4 key购买 nike

我正在尝试制作一种背景颜色来填充整个页面。我在 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>

背景颜色作用如下:

enter image description here

最佳答案

我现在无法重现您的问题,所以这是一个猜测:当您在 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 上使用 display: flex; flex: 1; 在你的 app-root 上

关于html - Angular4 背景颜色设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45619159/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com