css - ページ下部のフッター CSS

Question

このフィドルでは、このスクリーンショットのように、ページの下部にとどまるフッターを作成したいと考えています。

フッター

ただし、ブラウザーウィンドウが最小化されてビューポートがコンテンツ領域より小さくなり、ページがスクロール可能になっている場合、フッターはコンテンツの下ではなくページの中央に留まります。ユーザーがスクロールすると、フッターは次のスクリーンショットのようにコンテンツボックスの中央に留まります。

フッターをスクロールしました

スクロールバーがないときはビューポートの下部に留まり、スクロールバーが表示されコンテンツがビューポートの外にあるときはコンテンツボックスの下部に留まるフッターを作成するにはどうすればよいですか?

position:absolute; bottom:0;フッターで使用しています。コンテンツボックスまたはフッターに宣言を追加する必要がありますか? ご協力いただきありがとうございます！

score 0 · Accepted Answer

CSS を介してこれを行う試みは数多くありますが、ほとんどはハックな回避策であり、正直なところ Javascript を使用する方が簡単です。しかし、純粋な CSS の場合、通常は次のようになります。

1)*ボーダーボックスへの設定:

* {
    -webkit-box-sizing:border-box;
    -moz-bos-sizing:border-box;
    box-sizing:border-box;
}

2) フッターを position:absolute に設定し、高さを固定:

#footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:40px;
}

3) html、body、およびコンテナを height:100%、min-height:100% に設定し、コンテナの位置を static 以外に設定し、 padding-bottom をフッターの高さ + 少しのギャップ (必要な場合) に設定します。 :

html,body,#container {
    height:100%;
    min-height:100%;
}

#container {
    position:relative;
    padding-bottom:50px;
}

これにより、IE8 以降では適切に処理されるはずです。IE7以下の場合...まあ、かなりトリッキーになります。必要に応じて、それをグーグルで検索できます。:) いくつかのメモ:

高さ 100% にパディングが含まれるようにするには、box-sizing宣言が必要です (そうしないと、指定したパディングに 100% を加えたものになります)。
position:absolute が子要素で使用される場合、子の位置が親に対して相対的になるようにするには、静的以外の位置を親で宣言する必要があります。この場合、それは単なるウィンドウになります)。

1 に答える 1