关于CSS：Angular Material 2 md-sidenav-content不占满高度


Angular Material 2 md-sidenav-content does not take up full height

我正在使用Angular材质2，并且遇到了md-sidenav-content仅占据内容高度的问题。 但是，我希望它是高度的100％或内容高度(以最大者为准)。 注意，作为md-sidenav-container的父容器确实具有我想要的完整高度。

screenshot

screenshot2

但是，在我的应用程序中没有任何地方使用md-sidenav-content。 它似乎是由Angular Material 2本身生成的。 所以我不能更改它的属性。

由于存在此问题，我无法获得绿色背景来跨越整个高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// app.component.html
<md-sidenav-container>

<!--side nav-->
<md-sidenav #sidenav mode="over" class="app-sidenav">

    <!--header-->
   
    <img id="side-menu-logo" src="../assets/images/logo_small.png"> MyApp
   

    <!--body-->
    Timesheet

</md-sidenav>



<!--main content-->
<router-outlet></router-outlet>
</md-sidenav-container>


// login.component.html

   
       
            <md-card>

                Login

               

                <form name="form" [formGroup]="loginForm" (ngSubmit)="onLogin()">

                    <!--email-->
                    <md-input type="email" placeholder="Email" formControlName="email"></md-input>
                    <label class="errorMessage" *ngIf="!loginForm.controls['email'].valid && loginForm.controls['email'].dirty" for="email">
            Email is required</label>

                    <!--password-->
                    <md-input type="password" placeholder="Password" formControlName="password"></md-input>
                    <label class="errorMessage" *ngIf="!loginForm.controls['password'].valid && loginForm.controls['password'].dirty" for="lastName">
            Password is required</label>

                   

                   
                        <button [disabled]="loading || !loginForm.valid" class="btn btn-primary">Login</button>
                        forgot password
                   
                </form>
            </md-card>
       
   



// loging.component.css
#login-container {
    min-height: 100%;
    background-color: green;
}
相关讨论

尝试给予

1
height: 100vh;

到md-sidenav-container。 它将采用视觉高度，即显示屏幕的高度。
如果将md-toolbar放置在md-sidenav-container之外，则可以通过减去" md-toolbar"的像素(假设其高度为50px)来调整容器本身的高度：

1
height: calc(100vh - 50px);

类似的问题和您正在寻找的答案可以在这里找到。
无法将angular2-material md-sidenav获取为100％高度

将高度设置为100vh而不是100％是解决此问题的最简单方法。

我也有这个问题。

尝试按照调整sidenav大小的文档中的建议，使用CSS https://material.angular.io/components/sidenav/overview将html和正文高度设置为100％

您可以像这样在mat-sidenav-container上使用fullscreen属性：

1
<mat-sidenav-container fullscreen>