我正在使用Angular材質2,而我遇到這個問題,其中md-sidenav-content只佔用內容的高度。但是,我希望它是100%的高度或內容高度(以最大者爲準)。請注意,父容器是md-sidenav-container確實有我想要的完整高度。角材質2 md-sidenav-content不佔用全高
然而,在我的應用程序沒有地方我用MD-sidenav內容。這似乎是由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;
}