css - スタック オーバーフロー風のフッター？

Question

Stack Overflow のこのフッターは夢のようなものです。本文とは異なる色のフルレングスのフッターですが、テキストは中央の列に揃えられており、ページの下部にくっついています。

私は粘着性のある部分を手に入れたと思いますが、完全な長さのフッターとの配置がどのように機能するかを概念化できません.

スタック オーバーフローにあるようなフッターの作成に成功した人がいるかどうか、コーディングを理解するのに役立つかどうか疑問に思っています。

Answer 1

これは、多くのサイトと同様に、stackoverflowが広く受け入れられている960pxのページコンテナ幅の標準を使用しているためです。

全幅のフッターコンテナ内に、コンテンツ用の2番目の非表示のコンテナを配置します。このコンテナの幅は、メインのドキュメント本文の幅と同じです（例：960px）。これがstackoverflowのボディコンテナです：

#content {
    margin: 0 auto;
    width: 960px;
    min-height: 450px;
}

そして、これがフッターコンテンツのコンテナーです。

.footerwrap {
    margin: 0 auto;
    text-align: left;
    width: 960px;
}

さらに、フッターが「くっつく」とは思いません。これは単にドキュメントの最後にあるため、ページの下部に表示されます。私はstackoverflowのhtmlソースをそれほど詳細に見ていないので間違っているかもしれませんが、他の何かはやり過ぎのようです。