Липкий нижний колонтитул внизу в углу 2

Question

Я строю проект в угловом 2, и мне нужен липкий нижний колонтитул, который всегда должен быть внизу страницы, а не фиксирован. Пример: http://codepen.io/chriscoyier/pen/uwJjr

Структура компоненты «приложений», как это:

<header-main></header-main> 
<router-outlet></router-outlet> 
<footer>...</footer> 

Возможно, проблема не связана с самим угловым, но только с помощью CSS. Тем не менее, я попытался его реализация, как это:

app { 
    min-height: 100%; 
    position: relative; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 271px; 
} 

Результат ужасен:

Интересно то, что если я выключаю положение колонтитула в инспекторе и снова включу, футер становится OK:

РЕШЕНИЕ:

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

Answer 1

См Пример: Link

Добавить CSS:

.page-wrap{position: relative;} 
#add{position: absolute; bottom: 160px;} 

Answer 2

Ссылку вы предоставили на самом деле является прекрасным примером того, как сделать то, что это звучит, как вы просите. Я попытался использовать элементы, которые вы упомянули, с необходимым CSS ниже.

Here's a working example.

<div class="app"> 
    <header> 
     Header here 
    </header> 
    Content isn't long enough to push footer to the bottom. 
</div> 
<footer> 
    This is the footer 
</footer> 

html, body { 
    /* make sure the body does not have a margin */ 
    margin: 0; 
    /* this forces the body tag to fill the height of the window */ 
    height: 100%; 
} 
.app { 
    /* the .app div needs to be AT LEAST 100% of the height of the window */ 
    min-height: 100%; 
    /* now that it is 100% the height, we 'pull' the footer up */ 
    /* margin-bottom must be the same height as the footer height below */ 
    margin-bottom: -271px; 
} 
footer{ 
    /* .set the height of the footer */ 
    height: 271px; 
    /* just setting a color so you can see the footer */ 
    background: orange; 
} 

/* the following is not necessary, just showing how a header could be added */ 
header{ 
    height: 30px; 
    background: teal; 
} 

Answer 3

Это, как я решаю липкий колонтитул (не фиксирован)

app.component.ts 
..... 
export class AppComponent { 
    clientHeight: number; 

constructor() { 
    this.clientHeight = window.innerHeight; 
} 
} 

app.component.html 

<div [ngStyle]="{'min-height': clientHeight + 'px', 'margin-bottom': '-200px'}"> 
      <!-- 'margin-bootom': '-FooterHeight' --> 
    <app-navbar></app-navbar> 
      <!-- Your Navbar here --> 
    <router-outlet></router-outlet> 
    <div style="height: 200px"></div> 
      <!-- 200px is FooterHeight this will push 
      the footer so it will not overlap if you have very long content --> 
</div> 

<app-footer></app-footer> 
<!-- Your footer here --> 

Answer 4

ответа на "Phen" ответа. Вы можете сделать это некоторое более динамичной для поддержки несколько устройств (если сноска изменение высоты):

app.component.ts 
 
..... 
 
export class AppComponent implements AfterViewInit { 
 
    clientHeight: number; 
 
    footerHeight:umber; 
 
    @ViewChild('footer') footerDiv: ElementRef; 
 

 
constructor() { 
 
    this.clientHeight = window.innerHeight; 
 
} 
 
ngAfterViewInit() { 
 
    this.footerHeight=this.footerDiv.nativeElement.offsetHeight; 
 
} 
 
} 
 

 
app.component.html 
 

 
<div [ngStyle]="{'min-height': clientHeight-footerHeight + 'px'}"> 
 
    <app-navbar></app-navbar> 
 
      <!-- Your Navbar here --> 
 
    <router-outlet></router-outlet> 
 
</div> 
 

 
<app-footer #footer></app-footer> 
 
<!-- Your footer here -->