下面的演示作为 Material 工具栏,样式如下:
mat-toolbar {
display:flex;
position: fixed;
justify-content: space-between;
}
全屏
https://angular-material-toolbar-fixed-with-styling.stackblitz.io/
堆栈 Blitz
我们应该如何防止 lorem ipsum 文本在固定工具栏下滚动?
我尝试将 router-outlet
包装在一个 div 中,并将 margin-top: 2rem
放在 div 上,但这会将工具栏向下移动,如下所示演示。
最佳答案
改变下面的样式
.RouterOutlet {
margin-top: 2rem;
}
到
.RouterOutlet {
padding-top: 4rem; /* since mat-toolbar taking height of 64px. (1rem = 16px) */
}
@media (max-width: 599px) {
.RouterOutlet {
padding-top: 3.5rem;
}
}
关于html - 如何确保内容永远不会在固定 Material 工具栏下滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59699797/