[英]Angular router-outlet content overlaid on top of mat-toolbar
In my app.component.html, I placed a mat-toolbar above a router-outlet like so:在我的 app.component.html 中,我在路由器插座上方放置了一个垫子工具栏,如下所示:
<mat-toolbar color="primary">
<span>Tattoo Share!</span>
</mat-toolbar>
<router-outlet></router-outlet>
The problem is the router-outlet content is overlaid on top of the toolbar.问题是路由器插座的内容覆盖在工具栏的顶部。 This content should be beneath the toolbar.
此内容应位于工具栏下方。 How should I correct this?
我应该如何纠正这个问题? I tried placing things inside block elements such as div to no avail.
我尝试将东西放在块元素中,例如 div 无济于事。 There is also this CSS on mat-toolbar:
mat-toolbar { position: fixed }
mat-toolbar 上也有这个 CSS:
mat-toolbar { position: fixed }
You should use CSS in the styles.css
to put a margin-bottom equals to the height of the toolbar in itself.您应该在
styles.css
使用CSS 来放置一个等于工具栏高度的margin-bottom。 Also use an ID so it won't apply to other toolbars还要使用 ID,这样它就不会应用于其他工具栏
mat-toolbar#over-router {
margin-bottom: 40px; // check the actual height in the browser
}
You can use flex layout.您可以使用弹性布局。
<div class="home-main">
<app-toolbar></app-toolbar>
<div class="home-container">
<router-outlet></router-outlet>
</div>
</div>
.home-main {
height: 100%;
display: flex;
flex-direction: column;
}
Got it to work using some CSS on my toolbar:在我的工具栏上使用一些 CSS 让它工作:
mat-toolbar {
position: fixed;
top: 0;
z-index: 1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.