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>

<div class="page">块负责显示内容。这也是应该滚动的区域。通常在此容器内放置表，这些表具有粘性标头（通过使用position:sticky）。一切工作正常，但是我找不到一种方法，可以在表格的粘性标题和布局标题之间添加一些空间（边距/填充），而不会出现滚动条或视觉错误的问题。

我进行了一些堆叠闪电战，显示了我当前的实现/尝试：

Layout without margin or padding

Layout with margin（滚动条被推离最右边的位置）

Layout with padding（在粘滞表标题和布局标题之间添加透明间隙）

我的问题是：

是否可以在块<div class="page">容器中添加空间，以便在我的粘滞表标题和布局标题之间留有空隙？
使用边距时，是否可以防止滚动条从最右边的位置移开？（填充不起作用，因为该空间是透明的，所以我的粘性标头“浮起了”）

在此先感谢您的提示或提示！

Answer 1

也许是：“ border-top：实心1rem #ccc;”并且“ th”中的一些填充顶部和底部将在视觉上对其进行修复

Answer 2

使用“布局填充”选项，只需将在父级上设置的粘性元素printf( "%zu", sizeof(array)/sizeof(char*) );设置为top，在这种情况下为0 - padding-top。这将消除透明间隙，但也会在卡住元素时消除间距。如果要在卡住时保持间距，可以考虑创建一个与表格具有相同颜色背景的伪元素，或者可以在标题中添加top: -1rem;或margin-bottom。

CSS位置粘性-在粘性元素和父元素之间添加空格

2 个答案: