CSS позиция sticky - добавить пробел между sticky элементом и родителем - PullRequest
Новая
       52

CSS позиция sticky - добавить пробел между sticky элементом и родителем

0 голосов
/ 02 июля 2019

Я сделал следующий макет для своего приложения: 

<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). Все работает нормально, но я не могу найти способ добавить пробел (margin / padding) между липким заголовком таблицы и заголовком моего макета, не испытывая проблем ни с полосами прокрутки, ни с визуальной ошибкой.

Я сделал небольшой стек, который показывает мою текущую реализацию / попытки:

Компоновка без полей и отступов

Макет с полем (полоса прокрутки отодвинута от самого правого положения)

Макет с отступом (добавляет прозрачный пробел между липким заголовком таблицы и заголовком макета)

Мои вопросы:

  • Есть ли способ добавить место в моем блоке <div class="page"> контейнера, чтобы между моим липким заголовком таблицы и моим заголовком макета был промежуток?

  • Могу ли я помешать моим полосам прокрутки сдвинуться в крайнее правое положение при использовании поля? (заполнение не работает, потому что пространство прозрачно, так что мой липкий заголовок "плавает")

Заранее благодарим за каждый совет или подсказку!

Ответы [ 2 ]

0 голосов
/ 02 июля 2019

Перейдите с опцией «отступы макета» и просто установите липкие элементы top в значение 0 - padding-top, установленное в родительском элементе, top: -1rem; в этом случае.Это удалит прозрачный зазор, но также удалит интервал, когда элемент застрял.Если вы хотите сохранить интервал, когда застряли, посмотрите на создание псевдоэлемента с тем же цветом фона, что и в таблице, или, возможно, добавив margin-bottom или border к заголовку.

0 голосов
/ 02 июля 2019

Может быть: 'border-top: solid 1rem #ccc;'и некоторые отступы сверху и снизу в 'th' визуально исправят это

...