DIV+CSS: フッターは常に page_html/css_WEB-ITnose の下部に残ります。

フッターは常にページの下部に残ります

場合によっては、CSS を使用して適応性の高いレイアウトを作成します。フッター (フッター) が 1 つを超えないようにする方法コンテンツが表示されているときの画面 常にレイアウトの下部を維持するのは頭の痛い問題です。絶対位置決めを使用する例をいくつか見てきましたが、それはそれほど完璧ではないといつも感じています。午後の研究の後、IE5 と互換性のある負の値の外側パッチを使用してこの効果を実現する方法を思いつきました。 0、Opera 8.5、Firefox 1.5。以下の手順を見てみましょう:

1. ブラウザが高さを 100% として認識するには、まず html と body に高さの値を追加し、すべての要素のマージンとパディングをクリアする必要があります。 。テスト後、コンテンツが 1 画面を超えるかどうかに関係なく、HTML と本文の高さ: 100% はブラウザー ウィンドウ全体の高さに等しくなります。そして、次のレベルの子要素の高さ: 100% は、最初の画面の高さと同じになります。ちょっとわかりにくいですか？

css コード

1. * {
2. マージン: 0;
3. }
4. html, body {
5. height: 100%;
6. }

2.レイアウトを高さに適応させるには、min-height: 100%; を追加する必要があります。IE はこの属性をサポートしていませんが、IE の height: 100%; は同じ効果を持ちます:

CSS コード

#wrapper {

1. min-height: 100%;
2. }
3. * html #wrapper {
4. 高さ: 100 %;
5. }

このようにして、1 画面を埋める最小の高さの最も単純なアダプティブ レイアウトが準備されます。見やすくするために、次のように幅と背景色の変更を追加しました。

css コード

* {

1. margin: 0; >
パディング: 0;
}
html、本文 {
高さ: 100%;
テキスト整列:
フォント: 12px/1.4 Verdana、サンセリフ;
背景: #f00;
}
#wrapper {
幅: 770px;
最小高さ: 100%;
マージン: 左; >
13. }
14. * html #wrapper {
15. height: 100%;
16. }
18. 完全なコードを参照以下の操作効果: