CSS粘性定位 - 在粘性元素和父元素之间添加间距

Question

我可以帮您翻译，以下是翻译结果：

我为我的应用程序制作了以下布局：

最初的回答:

<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"> 容器添加间隔，以便在我的粘性表头和布局标题之间留有间隔？

• 当我使用边距时，是否可以防止滚动条被推离最右边的位置？（填充不起作用，因为空间是透明的，所以我的粘性表头“浮动”）

感谢您提前给出的每一个提示或建议！

- knoefel

Answer 1

也许在'th'中添加一些'border-top: solid 1rem #ccc;'和上下的padding可以在视觉上修复它。

- darthnach

---

谢谢你的回答，但是我已经尝试过了 - 添加"border-top"会将滚动条移离顶部，导致布局头部和滚动条之间出现间隙。所以，很遗憾这不是一个选项。 - knoefel

你在th中添加了border-top吗？因为我试过了，它起作用了https://layout-so-i1o8ms.stackblitz.io - darthnach

Answer 2

选择“布局填充”选项，然后将粘性元素的top设置为父元素上设置的0 - padding-top值，例如top: -1rem;。这将消除透明间隙，但也会在元素被固定时删除间距。如果您想保留元素固定时的间距，请考虑创建一个具有与表格相同背景色的伪元素，或者可能在标题中添加margin-bottom或border。

- JRoss