web-dev-qa-db-ja.com

Angular 2スティッキーフッターの実装

フッターをスティッキーフッターにしたいので、cssトリックの負のマージントリックに従ってみましたが、機能しませんでした。以下のプランカーコードでangular2アプリを偽装しようとしました。ステッカーを固定せずに粘着性を持たせて、メインセクションで利用できるコンテンツが増えたら一番下に移動します。フッターはメインセクションのデータの上に表示されていることに注意してください。

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

app.component：

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

フッターを修正して下に移動するための助けをいただければ幸いです。

htmlcssangularsticky-footer
6
John Jai

これを実現する方法はいくつかあります。これらのいずれかを試したことがあると思います： CSS-トリック-スティッキーフッター、5つの方法 。

それが機能するためには、次のことを行う必要があります。

  • フッターとコンテンツの両方の絶対位置を削除します。
  • 本体からデフォルトの上下の余白を削除します。
  • flexboxまたはグリッドオプションを使用しない場合は、フッターを除くすべてのコンテンツをone内に配置します。要素（その要素とフッターの合計の高さが少なくともビューポートの高さであることを確認できます）。

ここ は、スティッキーフッターを使用したAngular2アプリの実装です。

スティッキーフッターは、すべてのメインコンテンツを単一のdivにラップし、calc()を使用して、最小の高さを100vhからフッターの高さを引いた値に設定することで実現されます。

5
Chava Geldzahler

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ で言及されているこの例に従うこともできます。

このコードをstyles.scssに追加するだけです

html, 
body {
  height: 100%;
}

あなたのapp.component.scssで

:Host {
  display: flex;
  min-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>
6
Ballpin

.mainブロックに対してposition：absoluteを作成するのは良い考えではないと思います。フッターの絶対的な配置で十分です。このようなものを試してください

html {
  height: 100%;
}

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

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

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

また、.mainブロックスタイルからマージンとパディングトップを削除します

1
disstruct

2つのファイルを編集する必要があります。

index.html：

 <!-- Full height body -->
    <body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
      <app-root class="d-flex flex-column h-100"></app-root>
    </body>

app.component.html：

<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>
0
Visar1897