我可以帮您翻译,以下是翻译结果:
我为我的应用程序制作了以下布局:
最初的回答:
<div class="app-container">
<header>header </header>
<main>
<mat-sidenav-container>
<mat-sidenav [mode]="'side'" #sidenav>sidenav sidenav sidenav</mat-sidenav>
<mat-sidenav-content>
<div class="page">
<p><button mat-button (click)="sidenav.toggle()">Open Sidenav</button></p>
<table-sticky-header-example>loading</table-sticky-header-example>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</main>
<footer> footer </footer>
</div>
这个块负责显示内容。这也是应该可以滚动的区域。通常在此容器中放置表格,使用
position:sticky
实现固定表头。一切都正常工作,但我无法找到一种方法,在不出现滚动条或视觉错误的情况下,在表格的粘性标题和布局标题之间添加一些空间(边距/填充)。我做了一个小的 stackblitz,展示了我的当前实现/尝试:
有边距的布局(滚动条被推离最右边的位置)
有填充的布局(在粘性表头和布局标题之间添加透明间隙)
我的问题是:
有没有办法为我的
<div class="page">
容器添加间隔,以便在我的粘性表头和布局标题之间留有间隔?当我使用边距时,是否可以防止滚动条被推离最右边的位置?(填充不起作用,因为空间是透明的,所以我的粘性表头“浮动”)
感谢您提前给出的每一个提示或建议!