Угловой 2 impementation липкий нижний колонтитул

Я хочу, чтобы мой нижний колонтитул был липким нижним колонтитулом и пытался следовать css-трюкам negative margin trick, но не сработал. Я попытался имитировать мое приложение angular2 в приведенном ниже коде plunker. Я хочу, чтобы наклейка была не фиксированной, а липкой и шла вниз, когда в главном разделе будет больше контента. Примечание нижний колонтитул отображается над данными в главном окне раздел.

Http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts

Приложение.компонент: 

<nav-bar></nav-bar>
  <section class="main">
    <div class="main-container">
      Display my router-outlet here          
      <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>

    </div>
  </section>
  <footer-component></footer-component>

Любая помощь, чтобы исправить и переместить нижний колонтитул вниз ценится.

3 3
html css sticky-footer

3 ответа:

Есть несколько способов достичь этого. Я предполагаю, что вы пробовали один из них: CSS-tricks - Sticky footer, five ways.

Чтобы это сработало, вам нужно:

  • удалите абсолютное расположение нижнего колонтитула и содержимого.
  • удалите верхние и Нижние поля по умолчанию из тела.
  • Если вы не собираетесь использовать опцию flexbox или grid, поместите все содержимое, кроме нижнего колонтитула, внутри одного элемента (чтобы убедиться, что общая высота этого элемента плюс нижний колонтитул равна, по меньшей мере, высоте окна просмотра).

Здесь - реализация вашего приложения Angular2 с липким нижним колонтитулом.

Липкий нижний колонтитул достигается путем упаковки всего основного содержимого в один div и использования calc() для установки его минимальной высоты в 100vh минус высота нижнего колонтитула.

4

Я думаю, что это не очень хорошая идея, чтобы сделать позицию: абсолютной для вашего .основной блок. Абсолютного позиционирования для вашего нижнего колонтитула будет достаточно. Попробуйте что-нибудь вроде этого

html {
  height: 100%;
}

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

.main {
   min-height: 100%;
   padding-bottom: 55px;
}

#footer {
  position: absolute;
  bottom: 0;
}

Также удалите поля и отступ сверху.основные стили блоков

1

Вы все еще можете следовать этому примеру, упомянутому https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Просто добавьте этот код к styles.scss 

html, 
body {
  height: 100%;
}

В вашем app.component.scss 

:host {
  display: flex;
  height: 100%; // used percent instead of vh due to safari bug.
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

В вашем app.component.html 

<header>...</header>

<main class="Site-content">..</main>

<footer>...</footer>
1