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

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

0 голосов
/ 07 декабря 2018

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

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

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

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

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

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

1 Ответ

0 голосов
/ 09 декабря 2018

Вы можете использовать CSS с Flexbox, чтобы таблица заполняла оставшееся место на экране, устанавливая свойства flex-grow и flex-shrink соответствующим образом на панелях navbar, search и table.Затем используйте абсолютно позиционированный 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

...