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

Question

Я пытаюсь следовать этому уроку при создании слайда в навигации, и у меня есть следующий стекаблитц .Боковая навигация переключается, но она не расширяется, чтобы соответствовать странице.IIUC этот CSS-класс должен делать свое дело (In styles.css):

.container {
    position: absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right: 0px;
}

Мысли?

Answer 1

Я столкнулся со многими похожими проблемами, связанными с Angular Material.Проблема возникает из-за того, что AngMat динамически генерирует пользовательские компоненты и классы во время рендеринга, поэтому зачастую сложно уловить эти вещи заранее.

Если вы откроете инструменты разработчика и выберете открытое меню, вы сможете найти пользовательский компонент, <mat-drawer class="sidenav mat-drawer..."/>, это кусок, который мешает меню полной ширины.Если вы вручную примените ширину: 100% к этому компоненту, он зафиксируется на месте.

Я нашел два подхода, ни один из которых не является идеальным решением.Вы можете изучить :: ng-deep и узнать, как переопределить стилизацию угловых материалов, отключив инкапсуляцию вида. Это довольно глубокая концепция, когда речь идет о теневых домах и всем остальном, но вам не нужнознать все это, чтобы знать, что вы можете переопределить стили с подходом.Однако в какой-то момент это будет устаревшим.Другой подход - жестко заданная ширина: 100% применяется непосредственно к компоненту.Так что-то вроде mat-drawer { width:100% } в таблице стилей верхнего уровня.

Answer 2

.container {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top:0px;
    left:0px;
    bottom:0px;
    right: 0px;
}

дайте мне знать, если это поможет, похоже, это работает, но я не знаю точно, что вы хотите, и, необязательно,

padding: 0;
margin: 0;

на элементе body для удаления полосы прокрутки.