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

-1

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

“对于全屏sidenav，推荐的方法是建立在DOM 这样可以自然占用全部空间：

然后他们有一个我试图复制的例子。当我看到我的sn-content div在mat-sidenav-container的css样式中显示时，由于某种原因，我看到这个高度是灰色的？我已经从chrome开发工具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>

来源

2017-10-10 user2094257

尝试使用此： <垫sidenav-容器类= “定制sidenav容器”> .custom-sidenav容器{ 位置：继承; 身高：100％; display：inherit; transform：inherit; } – user1594

@ user1594这是什么意思？ – user2094257

你可以尝试以上CSS样式的mat-sidenav-container – user1594

只是想张贴任何新的旅行在这里跟我一样....

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

文档浏览：Angular Material Sidenav API

而且，请注意垫sidenav容器组件，您可以添加指令“全屏”扩大你的内容，如果你愿意的话，以适应视口。推送和结束模式的叠加仅显示内容，因此如果它不适合整个视口，则叠加层也不会叠加。

<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>

来源

2018-01-17 13:43:27 Dillon

在导航组件css：

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

来源

2017-10-10 12:20:07 Vega

为什么这是必要的？ – user2094257

您的意思:: ng-deep？ – Vega

我的意思是整个陈述？为什么这个工作/为什么Sidenav没有按照预期从一开始就工作/ – user2094257

鉴于这种标记：

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

下面的样式表将帮助您解决问题：

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

来源

2017-10-10 12:58:09 user1594

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

回答

相关问题