Макет Flex, используемый в mat-drawer-content
Я использовал угловую гибкую компоновку в навигационном ящике, как это
<mat-drawer-container>
<mat-drawer #drawer mode = "over" >
<p>Drawer content</p>
<p>
<button mat-icon-button (click) = "drawer.close()">
<mat-icon>clear</mat-icon>
</button>
</p>
</mat-drawer>
<mat-drawer-content fxLayout = "row" fxLayoutAlign = "start center">
<p>
<button mat-icon-button (click) = "drawer.open()">
<mat-icon>menu</mat-icon>
</button>
</p>
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
как растянуть мат-ящик-контейнер до нижнего колонтитула?
<header fxLayout = "row" fxLayoutAlign = "end "> <div fxLayout = "row" > <fw-menu> </fw-menu> </div> <div fxLayout = "row" > <fw-top-bar> </fw-top-bar> </div> </header>, а затем нижний колонтитул <footer fxLayout = "row"> I am a sticky footer </footer>
Ответы 3
Вы можете использовать «полноэкранный режим», чтобы растянуть его до нижнего колонтитула.
<mat-drawer-container fullscreen>
<mat-drawer #drawer mode = "over" >
<p>Drawer content</p>
<p>
<button mat-icon-button>
<mat-icon>clear</mat-icon>
</button>
</p>
</mat-drawer>
<mat-drawer-content fxLayout = "row" fxLayoutAlign = "start center">
<p>
<button mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
</p>
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
К тому же этого атрибута нет ни в HTML, ни в материалах Angular.
Ваша проблема связана с тем, что ваши вещи не растягиваются.
Начните с того, что задайте тегам html и body полную высоту:
html, body {
height: 100%;
}
Затем вам нужно создать основной контейнер, в который вы поместите заголовок, контейнер и нижний колонтитул. Этот основной контейнер будет растягиваться и сгибаться.
<div class = "container" fxLayout = "column">
<header fxFlex = "10%"/>
<drawer fxFlex/>
<footer fxFlex = "10%"/>
</div>
В этой настройке ваш верхний и нижний колонтитулы будут занимать по 10% страницы каждый, а ящик займет оставшееся пространство.
вот ссылка на сайт, который я пробовал. еще контейнер не расширен. редактировать ссылка
Если вы не зададите всем элементам высоту, они не будут занимать всю высоту. Вы должны явно указать, что они имеют полную высоту, либо с помощью height: 100%, либо путем добавления атрибута fxFlex. Вот рабочий стек
есть полоса прокрутки. если нет содержимого, какой элемент вызывает это? есть ли способ без предоставления css. только гибкий макет. И мне нужна кнопка на левой стороне заголовков, чтобы показать / скрыть ящик. какой подход я должен использовать для связи между компонентами?
Это потому, что вы указали неправильные свойства высоты своим элементам. Я исправил вашу проблему с подгонкой страницы, это еще одна проблема, которая у вас есть, и я действительно не хочу возиться с вашим кодом, чтобы найти ее. Чтобы помочь вам, знайте, что height: 100% означает 100% родительской высоты, а не 100% оставшейся высоты. Вероятно, именно это и происходит здесь, поскольку размер прокрутки равен размеру нижнего колонтитула.
.menu-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<mat-sidenav-container class = "menu-container">
Это сработало для меня
также добавьте html для вашего верхнего и нижнего колонтитула