Angular Material 2 md-sidenav-content 不占满高度

Posted 2023-02-18

【中文标题】Angular Material 2 md-sidenav-content 不占满高度

【英文标题】：Angular Material 2 md-sidenav-content does not take up full height

【发布时间】：2017-07-14 20:47:52

【问题描述】：

我正在使用 Angular 材料 2，我遇到了这个问题，其中 md-sidenav-content 只占用了内容的高度。但是，我希望它是高度的 100% 或内容高度（以最大者为准）。请注意，作为 md-sidenav-container 的父容器确实具有我想要的完整高度。

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

由于存在这个问题，我无法让绿色背景跨越整个高度。

// app.component.html
<md-sidenav-container>

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

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

    <!--body-->
    <a [mdTooltip]="!isCurrentUserExist ? 'Please login first!': ''" [routerLink]="['/create-timesheet']" (click)="sidenav.close()">Timesheet</a>

</md-sidenav>

<br><br>

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


// login.component.html
<div id="login-container" class="container-fluid">
    <div class="row">
        <div id="login-component" class="col-md-6 offset-md-3">
            <md-card>

                <h2>Login</h2>

                <br>

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

                    <br><br>

                    <div class="form-group">
                        <button [disabled]="loading || !loginForm.valid" class="btn btn-primary">Login</button>
                        <a *ngIf="!isLoading" [routerLink]="['/forgot-password']" (click)="onForgotPassword()">forgot password</a>
                    </div>
                </form>
            </md-card>
        </div>
    </div>
</div>


// 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）：

height: calc(100vh - 50px);

【参考方案2】：

我也遇到了这个问题。

尝试按照 Sizing the sidenav

下文档中的建议，使用 CSS https://material.angular.io/components/sidenav/overview 将您的 html 和正文高度设置为 100%

【参考方案3】：

类似的问题和您正在寻找的答案可以在这里找到.. Can't get angular2-material md-sidenav to be 100% height

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

【参考方案4】：

将最小高度 mat-sidenav-container 设置为 100%。对我有用。

【参考方案5】：

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

<mat-sidenav-container fullscreen>