угловой выдвижной ящик для материала с высотой

Question

По какой-то причине я не могу заставить ящик циновки занимать оставшуюся доступную высоту на экране.Я пробовал:

.drawer-container {
    position: fixed;
    height: 100%;
    min-height: 100%;
    width: 100%;
    min-width: 100%;
}

Но по какой-то причине я все еще получаю переполнение, даже если на экране есть только один элемент, обозначенный полосой прокрутки:

И когда я удаляю правила CSS, я получаю следующее:

В основном около 10%только высота экрана.Я подумал об использовании фиксированной высоты, но думаю, что это будет выглядеть обрезанным, если смотреть на монитор большего или меньшего размера.Я был бы признателен за любую помощь, поскольку я действительно не знаком со всеми свойствами углового материала и с тем, как правильно им манипулировать.Заранее спасибо.

Answer 1

Ширина / высота в процентах пока не поддерживается mat-sidenav, я полагаю.

вместо height: 100vh;.

, который должен работать, но добавит полосу прокрутки, если на вашей странице есть какая-либо панель инструментов.

ОБНОВЛЕНИЕ:

HTML:

<mat-drawer-container class="parent" autosize>
        <mat-drawer mode="side">
            Your sidenav content
        </mat-drawer>

        <div class="content">
            Your main content.
        </div>
</mat-drawer-container>

CSS:

.parent {
    width: 100%;
    height: 100vh;   // calc(100vh - 64px) can be used if there is navbar at the top
}

.content {
    height: 100%;
}