CSSでフッターを底に貼り付ける

これまでの下部に立ち往生しているフッターを持っていたが、コンテンツが大きい場合はプッシュダウンしますか?
私がこのイメージをつくったことを示すために.

これが次のとおりです.

左側:グリーンボックスはビューポート、黄色は非常に小さいコンテンツであり、ピンクのフッターは底に貼り付けられている

右:コンテンツはビューポートよりも大きいので、同様にフッタを押した.

この特定の問題については、いくつかの解決策があります.
私は、彼らが最も主流のものであると思う時から、ちょうど彼らのうちの2つを示しています.
これらは次のようになります.

CSS flexbox sticky footer

CSS grid sticky footer

スティッキーフッター
Flexを使用すると、我々は簡単にコンテンツのセクションを拡大することによって、この付箋フッター効果を達成することができます.
これが意味するのは、我々が我々の体をflex要素であるように設定し、内容部分がflex: 1 0 auto 値.
この値はコンテンツを最大の要素として展開するように強制します.したがって、小さなコンテンツ領域を持っていれば、スペースを埋めるために自動的に展開されます.
HTML構造体を以下に示します:

<div class="content">
  Content goes here
</div>
<footer>
  I'm a sticky footer
</footer>

最初にflexプロパティを本体に追加しましょう.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

これは、垂直方向に要素を曲げたflex要素になるようボディに伝えます.
次に、ビューポートに基づいて最小高さを作成します.
それから、我々がしなければならないすべては、以下の資産を我々の内容部に加えることです

.content {
  flex: 1 0 auto;
}

その行は、コンテンツブロックとフッターの間にスペースを強制的に強制します.
このメソッドは次のcodepenで動作します.
テキストとテキストの多くを切り替えるには、ボタンを使用することができます.

CSSグリッド
今グリッドは非常に同様のセットアップですが、我々は実際に同じを使用することができますHTML このメソッドです.

<div class="content">
  Content goes here
</div>
<footer>
  I'm a sticky footer
</footer>

今、我々の体のために、我々は以下のセットアップを使用できます:

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

これは、グリッドのように振る舞うために私たちの体を教えて、2行のセットアップを使用して最初の1つが使用されます1fr これは1つの分数単位を意味します.
それが必要なもの、または満たすことができるものを拡大している内容に、そして、フッターはオートであり、それはフッターのコピーのサイズをどのように取るかを意味します.
それから、我々は我々のコンテンツ部のためにどんなスタイルも必要としません
この結果、次のようになります.
もう一度、ボタンをクリックしてコピーを切り替えることができます.

読んでいただきありがとうございます、接続しましょう!
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or