基本的な考え方は、
最初に外層にコンテナ div を設定し、その高さがブラウザ ウィンドウの高さになるように ID を #container に設定してから、#footer div を # の子 div として設定することを検討します。コンテナーを配置し、絶対配置を使用して #container の下端にピンで固定し、目的の効果を実現します。
ここをクリックしてケースページの効果を確認してください。 ブラウザの高さと幅を変更して、フッター部分の効果を確認します。
コードの実装
: まず HTML 構造を検討します。このデモ ページの HTML コードは非常に単純です。
<div id="コンテナ">
<div id="コンテンツ">
<h1>コンテンツ</h1>
<p>フッター効果を確認するには、ブラウザ ウィンドウの高さを変更してください。 </p>
<p>サンプル テキストはここにあります、………、サンプル テキストはここにあります。 </p>
</div>
<div id="フッター">
<h1>フッター</h1>
</div>
</div>
次に、CSS、
body、html {
を設定します。
マージン: 0;
パディング: 0;
フォント: 12px/1.5 arial;
高さ:100%;
}
＃容器 {
最小高さ:100%;
位置: 相対的;
}
＃コンテンツ {
パディング: 10px;
パディングボトム: 60px;
/* 20px(フォントサイズ)x2(行の高さ) + 10px(パディング)x2=60px*/
}
#フッター {
位置: 絶対;
下: 0;
パディング: 10px 0;
背景色: #AAA;
幅: 100%;
}
#フッターh1 {
フォント: 20px/2 Arial;
マージン:0;
パディング:0 10px;
}
1: まず、html 要素と body 要素の高さ (height 属性) を 100% に設定します (5 行目)。これにより、まずルート要素の高さがブラウザ ウィンドウ全体に収まるようになり、次に #container の高さが決まります。ブラウザウィンドウ全体を埋めます。なぜhtml要素とbody要素を同時に設定するのかというと、FirefoxとIEではルート要素が異なるものとみなされるため、ここで設定しているためです。
2: 次に、#container の高さを 100% に設定します (8 行目)。ただし、ここでは通常の高さ属性の代わりに「min-height」属性が使用されていることに注意してください。これは、コンテンツの # 場合を考慮する必要があるためです。コンテンツが増加し、その高さがブラウザ ウィンドウの高さを超えた場合、#container の高さがまだ 100% であれば、#footer はブラウザ ウィンドウの下端に配置され、#content コンテンツが覆われます。 min-height 属性を使用する目的は、#container の高さを「少なくとも」ブラウザ ウィンドウの高さにすることです。これは、その中のコンテンツが増加すると、その高さも増加することになります。
ただし、Firefox と IE7 では min-height 属性がサポートされていますが、IE6 では min-height 属性がサポートされていないことに注意してください。ただし、「偶然」、IE6 では min-height 属性がサポートされます。は height 属性として解釈されますが、IE6 における height 属性の効果は、min-height が本来持つべき効果です。つまり、IE6 では、子 div の高さによって親 div の高さが増加します。 。したがって、これにより、IE6、IE7、Firefox で必要な効果を正確に実現できます。
3: 次に、#container を相対配置に設定します (9 行目)。これは、その中の #footer、いわゆる「最後に配置された祖先要素」の配置基準にするためです。
4: 次に、#footer を絶対配置に設定し (17 行目)、#container の下部に貼り付けます (18 行目)。
5: ただし、#container の下部に #foooter を貼り付けると、実際には上の #content div と重なってしまうので、#content のコンテンツを隠すことを避けるために、パディングを削除して #contetn に設定します。下側に、padding-bottom の値を #footer (13 行目) の高さと等しくすることで、#content のテキストを確実に避けることができます。この高さを計算するときは、に示されている計算方法に注意してください。コード内のコメント (14 行目)。