首页 文章

无法将角度/材料sidenav的高度设置为100％

提问于
浏览 次
-1

我试图将角度/材料sidenav的高度设置为100％ . 由于某种原因它被设置为22px使得它无法使用，因为sidenav中的任何项目填满了整个高度...我设法使用mat-sidenav-container全屏属性来工作但是当我这样做时所有其他内容（应该在sidenav旁边）不会显示...通过sidenav文档阅读我发现以下内容：

“对于全屏sidenav，推荐的方法是设置DOM，以便自然占用整个空间：”

然后他们有一个我想要复制的例子 . 当我在chrome-sidenav-container的chrome格式中查看我的sn-content div时，我发现高度因为某些原因而变灰了？我已经从chrome dev tools inspect元素复制了选择器路径并将高度设置为100％，但仍然没有运气 . 我也尝试过使用！重要但是也没有改变任何东西 . 知道我做错了什么/可能会发生什么？

我的导航组件的html代码：

<mat-sidenav-container position="start">
    <mat-sidenav #sidenav mode="push">
        Navigation component width is ok
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </mat-sidenav>
    <div class="sn-content">
    <button type="button" (click)="sidenav.toggle()">toggle</button>
    </div>
</mat-sidenav-container>

我的导航组件的CSS：

body > app-root > app-home > navigation > mat-sidenav-container > mat-sidenav-content {
    margin: 0;
    height: 100% !important;
    width: 100%;
}

然后我在以下html代码中使用此导航组件：

<navigation></navigation>

        <div fxLayout="column" fxLayoutAlign="end end">
            <div fxFlex="20%">
            <h4>testing angular flex layout turning out to be quite unusual</h4>                
            </div>

        </div>
css html5 angular angular-material

3 回答

  • 3

    只是想发布像我这样的新旅行者....

    不确定这是一个新选项还是添加了哪个版本的材料，但是目前你可以简单地将[fixedInViewport] =“true”添加到mat-sidenav组件以及使用[fixedTopGap]和[fixedBottomGap]来选择允许菜单/工具栏的任何间隙 .

    这里的文档：Angular Material Sidenav API

    另请注意，在mat-sidenav-container组件上，您可以添加指令“fullscreen”以扩展内容以适合视口（如果您愿意） . 推送和覆盖模式的叠加仅显示在内容上，因此如果它不适合整个视口，那么叠加也不会 .

    <mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav 
                 [fixedInViewport]="true" 
                 mode="push">
        This is the sidenav, yay
    </mat-sidenav>
    <mat-sidenav-content>
        This is the content section
        <button mat-button
                (click)="sidenav.toggle()">Toggle sidenav</button>
    </mat-sidenav-content>
</mat-sidenav-container>
    回复于
  • 0

    在导航组件css中：

    ::ng-deep .mat-sidenav-container{
  height:100vh !important; /* or 100% */
}
    回复于
  • 1

    鉴于此标记：

    <mat-sidenav-container class="custom-sidenav-container">

    以下样式表将解决您的问题：

    .custom-sidenav-container { 
    position: inherit;
    height: 100%;
    display: inherit;
    transform: inherit; 
}
    回复于

相关问题