Ryan Fait の Sticky Footer は、私が過去に何度も使用したシンプルなソリューションです。

基本的な HTML:

CSS：

これを、すでに取得したものと同様のものに、おおよそ次のように翻訳します。

HTML:

CSS：

ラッパーの余白の負の数値をフッターの高さに合わせて更新し、div を押すことを忘れないでください。幸運を！

Ryan Fait の Sticky Footer は非常に優れていますが、基本的な構造が欠けていることがわかりました*。

フレックスボックスのバージョン

幸運にも古いブラウザをサポートせずに Flexbox を使用できる場合、スティッキー フッターは非常に簡単です。 および はフッターの動的サイズ変更をサポートします。

Flexbox を使用してフッターを下部に固定するコツは、同じコンテナ内の他の要素を垂直に曲げることです。必要なのは、display: flex を持つフルハイトのラッパー要素と、flex 値が 0: p> より大きい少なくとも 1 つの兄弟要素だけです。 CSS：子> リーリー