Установите таблицу матов, чтобы использовать оставшееся место на экране с полосой прокрутки

Question

У меня есть приложение, составленное по этой вертикальной структуре: панель навигации, раздел поиска и таблица с результатами. Каждый из этих элементов дерева занимает необходимое пространство без использования фиксированных размеров. Более того, в разделе поиска есть скрытые подразделы, поэтому его размер может со временем меняться.

Я пытаюсь сделать следующее: я хотел бы, чтобы эти три секции независимо регулировали свою высоту, чтобы занимать все доступное пространство. Но так как у меня может быть много результатов на столе, у этого должна быть вертикальная полоса прокрутки. Так что единственная полоса прокрутки, которую я хочу видеть, находится в разделе результатов таблицы.

Если я установлю

переполнение: авто

на глобальном CSS я вижу глобальную полосу прокрутки, если таблица имеет слишком много результатов.

Как заставить таблицу использовать оставшееся место на экране и показывать полосу прокрутки, когда это необходимо?

Answer 1

Вы можете использовать CSS с Flexbox, чтобы таблица заполнила оставшееся место на экране, установив flex-grow а также flex-shrink свойства соответственно на вашей панели навигации, поиска и таблицы. Затем используйте абсолютно позиционированный div с overflow: auto обернуть твой стол.

HTML:

<div id="container">
    <div id="navbar"></div>
    <div id="search"></div>
    <div id="table">
        <div id="table-container">
            <!-- Table goes here -->
        </div>
    </div>
</div>

CSS:

#container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

#navbar {
    flex: 0 0 auto;
    height: 70px;
    width: 100%;
}

#search {
    flex: 0 0 auto;
    height: 50px;
    width: 100%;
}

#table {
    flex: 1 1 auto;
    width: 100%;
    position: relative;
}

#table-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

#table-container table {
    width: 100%;
}

А для бонусных баллов добавьте position: sticky закрепить заголовок таблицы на свитке:

.mat-header-row th {
    position: sticky;
    top: 0;
    background-color: white;
}

Демонстрация Stackblitz здесь: https://stackblitz.com/edit/angular-ykwfsy