2017-02-24 95 views
2

我正在使用Angular材質2,而我遇到這個問題,其中md-sidenav-content只佔用內容的高度。但是,我希望它是100%的高度或內容高度(以最大者爲準)。請注意,父容器是md-sidenav-container確實有我想要的完整高度。角材質2 md-sidenav-content不佔用全高

screenshot

screenshot2

然而,在我的應用程序沒有地方我用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; 
} 

回答

7

儘量給

height: 100vh; 

md-sidenav-container。它將佔用視覺高度,因此顯示它的屏幕高度。 如果放在外面的md-sidenav-container可以通過減去了`MD-工具欄的像素調整容器本身的高度」一md-toolbar(假設其高度爲50像素):

height: calc(100vh- 50px);