[転送] DIV+CSS を使用してフッターを下部に維持_html/css_WEB-ITnose

CSS で Web サイトのフッターを配置する方法 (DIV+CSS を使用してフッターを常に下部に配置します)
私は通常 CSS を使用して、多くのコンテンツを含む Web サイトをレイアウトしました。2 日前、CSS + DIV を使用しました。コンテンツの少ないページを作成する 誰もが遭遇する可能性のある小さな問題は、コンテンツが比較的小さい場合、ページのフッターがコンテンツの代わりに上部に移動することです。素直に一番下に留まり、勉強になりました。専門家を見つけるのに長い時間がかかり、最終的にそれを理解しました。これは、みんなと共有するための小さなコツです

まず、外側の層に DIV を設定する必要があります。 (content

パディング: 0;
フォント: 1 2px/1.5 arial ;
高さ:100%;
}
#content {
min-height:100%;
位置:相対;
}
#main {
パディング: 10px;
パディングボトム: 60px; /* 20px(フォント サイズ)x2(行の高さ) + 10px(パディング)x2=60px*/
}
#footer {
位置: 絶対;

パディング: 10px 0;
背景色: #AAA;
幅: 100%;
}
#footer h1 {
フォント: 20px/2 Arial;
マージン:0;
パディング:0 10px;
}


まず、HTML と BODY の HEIGHT 属性を 100% に設定します。高さがブラウザーに収まるようにします

次に、#content の高さを 100% に設定します。これは、#main のコンテンツが増加すると、その高さがブラウザ ウィンドウの高さを超えるためです。そのため、#content の高さが 100% のままであれば、#footer は依然として 100% に配置されます。ブラウザ ウィンドウの下端にあるため、#content のコンテンツが覆われます。

min-height 属性を使用する機能は、#content の高さをブラウザ ウィンドウの高さ「以上」にすることであり、その中のコンテンツが増加すると、その高さも増加します。これが必要な効果です。 。

次に、#content を相対位置に設定します。これは、その中の #footer の位置基準にするためです。 ‐ ‐ ‐ ‐ ‐ #main の一番下に配置されます。

ただし、#content の下部に #footer を貼り付けると、実際には上の #main div と重なってしまうことに注意してください。 #main のコンテンツを覆うことを避けるために、パディングを削除して #main に設定します。下側でpadding-bottomの値を#footerの高さと同じにすると、#mainのテキストを確実に避けることができます。
？