CSS は下部固定を実装します_html/css_WEB-ITnose

ページを作成するときに、HTML ページのコンテンツが少なくなると、Web ページの「フッター」部分が浮いてページの中央に表示される現象が発生し、大きな視覚効果が得られます。ページの見栄えが悪くなります。特にワイドスクリーンが増えている現在、この現象はさらに一般的です。

それでは、ウェブページの「フッター」部分をページの下部に永久に固定するにはどうすればよいでしょうか？ここで言われているのは、フッターは常にモニター画面の下部に固定されるのではなく、常にページの下部に固定されるということです

つまり、コンテンツがほんの少ししかない場合、Webページはブラウザの下部に表示されますが、コンテンツの高さがブラウザの高さを超える場合、Web ページのフッター部分は常にページの下部に表示されます。つまり、フッター部分は常にページの一番下に沈みます。

メソッド:

1. HTML 構造:

<div id="container">    <div id="header">Header Section</div>        <div id="page" class="clearfix"> 页面容容部分 </div>    <div id="footer">Footer Section</div></div>

フッターが常にページの下部に固定されていることを実現するには、4 つの div だけが必要で、そのうちの div#container がコンテナです。 div#header (ヘッダー)、div#page (ページのメイン部分)、div#footer (フッター部分) を含めます

2. CSS コード:

html,body { margin: 0; padding:0; height: 100%;} #container { min-height:100%; height: auto !important; height: 100%; /*IE6不识别min-height*/ position: relative;} #header { background: #ff0; padding: 10px;} #page { width: 960px; margin: 0 auto; padding-bottom: 60px;/*等于footer的高度*/} #footer { position: absolute; bottom: 0; width: 100%; height: 60px;/*脚部的高度*/ background: #6cf; clear:both;}

Principle:

100db36a723c770d327fc0aef2ce13b1 < ;body> タグ:

コンテナの高さの割合を設定できるように、html タグと body タグで高さ (高さ) を「100%」に設定する必要があります。同時に、マージンを削除する必要があります。 HTML と本文のパディングも同様に、
1. div#container コンテナ:
div#container コンテナの最小高さ (min-height) を 100 に設定する必要があります。 %; これは主に、コンテンツがほとんどない (またはまったくない) 場合に役立ち、100% の高さを維持できます。さらに、絶対配置後に内部の要素が div#container コンテナからはみ出さないように、div#container コンテナに「position:relative」を設定する必要もあります。このコンテナには非常に重要な設定があり、このコンテナにパディングボトム値を設定する必要があります。この値はフッター div#footer の高さ (height) の値と同じ (またはわずかに大きい) 必要があります。
2. div#footer コンテナ: div #footer コンテナは固定の高さに設定する必要があります。 div#footer も絶対に配置し、bottom:0 に設定する必要があります。これにより、先ほど述べた効果が得られます。コンテンツが 1 つのポイントのみの場合。 , div#footer は画面下部に固定されます（div#container が min-height:100% を設定しているため）、コンテンツの高さが画面の高さを超える場合、div#footer も div# の下部に固定されますコンテナ、つまりページの下部に固定されています。
div#footer に「width:100%」を追加して、ページ全体に拡張することもできます。
3. その他の div:
他のコンテナに関しては、前のもののように、独自のニーズに応じて設定できます。 div# ヘッダー、div#left、div#content、div#right など。