フッターはページの下部またはコンテンツの下部（どちらか低い方）にあります。

Question

次の構造があります:

リーリー

JavaScript を使用して、

のコンテンツを動的に読み込みます。したがって、

# ブロックの高さは変更される可能性があります。

ブロックは、コンテンツが多い場合はページの下部に、コンテンツが少ない場合はブラウザ ウィンドウの下部に配置したいと考えています。コンテンツの行。

現在、どちらか一方を選択できます...しかし両方は選択できません。

誰もこれを行う方法を知っていますか?

をページ/コンテンツの下部または画面の下部のどちらか低い方に貼り付けます。

Answer 1

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

基本的な HTML:

リーリー

CSS：

リーリー

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

HTML:

リーリー

CSS：

リーリー

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

Answer 2

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

---

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

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

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

リーリー リーリー