Sticky footer in Angular 2 재질

Question

내가 물어보고 싶어하지 않았기 때문에 지금 약 3 시간 동안 검색하고 검색했는데 바닥에 고정 된 '바닥 글'변수는 어떻게 유지할 수 있습니까? 내가 갖고있는 콘텐츠가 아주 작 으면 페이지 중간에 앉아있을 필요가 없지만 많은 정보가 있으면 페이지 맨 아래에서 잠그고 데이터 위에 놓아두면됩니다.

그 방법은 다음을 포함합니다 : https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html 그리고이 테스트와 관련된 대부분의 질문은 테스트되거나 실패하거나 전혀 작동하지 않습니다.

Heres는 내 현재 코드 : 네비게이션 바에는 fullpage sidenav을 제어하기 때문에

<div class="content"> 
    <app-navbar></app-navbar> 
    <app-footer></app-footer> 
</div> 

과 <app-content></app-content>는 네비게이션 바 내에 있습니다.

<mat-sidenav-container fullscreen> 

    <mat-sidenav mode="push" #sidenav> 
    <div fxLayout="column"> 
     <mat-toolbar fxLayoutAlign="center center" color="primary"> 
     <button mat-icon-button routerLink="/home" (click)="sidenav.close()"> 
      <mat-icon>keyboard_backspace</mat-icon> 
     </button> 
     </mat-toolbar> 
     <button mat-button routerLink="/dashboard" (click)="sidenav.close()" >Information</button> 
     <button mat-button routerLink="/second" (click)="sidenav.close()" >Web tools</button> 
    </div> 
    </mat-sidenav> 
    <mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10"> 
    <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-xs> 
     <mat-icon>menu</mat-icon> 
    </button> 

    <div fxLayout="row"> 
     <button fxLayout="flex-shrink: 0;" mat-button class="title" style="font-size: 25px;">{{this.title}}</button> 
     <button fxShow="false" fxShow.gt-xs mat-button routerLink="/dashboard" [matMenuTriggerFor]="infoMenu">Information</button> 
     <button fxShow="false" fxShow.gt-xs mat-button routerLink="/second" [matMenuTriggerFor]="toolsMenu">Web tools</button> 
    </div> 
    <!-- fxFlex will fill the empty space and push the following items to the right --> 
    <div fxFlex></div> 
    <button mat-icon-button> 
     <mat-icon>face</mat-icon> 
    </button> 
    </mat-toolbar> 
    <app-container></app-container> 

</mat-sidenav-container> 

을 그리고 글은 다음과 같습니다 단지 슈퍼 기본 componenet입니다 :

전체 앱 메뉴 바는 다음과 같습니다

<mat-toolbar> 
    <div class="container"> 
    <span>this is a toolbar</span> 
    </div> 
</mat-toolbar> 

만의 스타일 필자가 지금까지 적용

이 있습니다 :

@import url('https://fonts.googleapis.com/css?family=Comfortaa'); 
.title { 
    font-family: "Comfortaa"; 
} 
html, body { 
    height: 100%; 
    margin: 0; 
} 
.content { 
    min-height: 100%; 
} 

글로벌 style.css 파일에 있습니다.

Answer 1

인 flexbox를 사용하는 방법 : 우리가 인 flexbox을 활용하면

우리가청소기를 얻을 수 있습니다 해결책. 또한 내 솔루션은 페이지의 첫 번째 구성 요소가 높이의 100 %를 차지해야한다는 것을 설명합니다. 이것은 종종 요소를 적절하게 배치하거나 배경과 작업하기 위해 필요합니다. 코드는 Material 2의 현재 버전과 일치합니다 - 작성 당시 2.0.0-beta.12입니다.

마크 업 :

<mat-sidenav-container class="all-wrap" fullscreen> 
    <mat-sidenav #sidenav> 
    <mat-list> 
     <mat-list-item [routerLink]="['/']"> Foo</mat-list-item> 
     <mat-list-item [routerLink]="['/bar']"> Bar</mat-list-item> 
    </mat-list> 
    </mat-sidenav> 

    <div class="page-wrap"> 
    <header role="banner"> 
     <mat-toolbar color="primary"> 
     <button 
      type="button" 
      mat-icon-button 
      (click)="sidenav.open()" 
      title="Open sidenav"> 
      <mat-icon>menu</mat-icon> 
     </button> 
     Your Toolbar 
     </mat-toolbar> 
    </header> 
    <main class="content"> 
     <router-outlet></router-outlet> 
    </main> 
    <footer> 
     Your sticky footer with a variable height. 
    </footer> 
    </div> 
</mat-sidenav-container> 

스타일 :

/* 
* Actual Sticky Footer Styles 
*/ 
.all-wrap { 
    min-height: 100vh; 
} 

.page-wrap { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

.content { 
    flex: 1; 
} 


/* 
* Make the Component injected by Router Outlet full height: 
*/ 
main { 
    display: flex; 
    flex-direction: column; 
    > *:not(router-outlet) { 
    flex: 1; 
    display: block; 
    } 
} 

당신은 내가 여기에있는 솔루션에 불만이 때부터 쓴 Blogpost에 대한 자세한 설명을 찾을 수 있습니다. demo도 있습니다.

Answer 2

대답은 여기에서 찾을 수 있습니다 : Sticky footer at the bottom in Angular 2

솔루션

app { 
    min-height: 100%; 
    width: 100%; 
    margin-bottom: -271px; 
    display: table; 
} 

header-main, 
router-outlet, 
footer{ 
    display: table-row; 
} 

header-main { 
height: 60px; 
} 

router-outlet { 
    position: absolute; 
} 

footer { 
    height: 271px; 
}