div フッター タグの CSS 実装はページの下部に固定されています

Web ページの「フッター」部分が浮き上がり、ページの中央に配置されます。これは視覚効果に大きな影響を与え、特にワイドスクリーンが増えている現在、ページの見栄えを悪くします。この記事では、さらに一般的な 2 つの解決策を紹介します。詳細を知りたい友人は、それを参照してください。ページャーであれば、HTML ページに含まれるコンテンツが少ないと、「フッター」部分が浮き上がってしまうことがあるはずです。これは視覚効果に大きな影響を及ぼし、特にワイドスクリーンが増えている現在、この現象はさらに深刻です。では、Web ページの「フッター」部分をページの下部に永久に固定するにはどうすればよいでしょうか?まず以下のコードを見てみましょう

これが最初の解決策です
、他にもいくつかありますHTML コード
コードは次のとおりです:

<p class="container"> 
<p class="header">这是头部</p> 
<p class="page clearfix"> 
<p class="left">left sidebar</p> 
<p class="content">main content</p> 
<p class="right">right sudebar</p> 
</p> 
<p class="footer">footer section</p> 
</p>

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;/*padding等于footer的高度*/} 
.footer{position:absolute;bottom:0;width:100%;height:60px;/*footer的高度*/background:#6cf;clear:both;} 
.left{width:220px;height:800px;float:left;
margin-right
:20px;background:lime;} 
.content{background:orange;width:480px;float:left;margin-right:20px;} 
.right{width:220px;float:right;background:green;} 
.clearfix:after, 
.clearfix:before{content:"";display:table} 
.clearfix:after{clear:both;overflow:hidden} 
.clearfix{zoom:1;}

このフッターを永久に実装します。ページの下部に固定されています。必要なのは 4 つの p#container だけです。このコンテナーには、p#header (ヘッダー)、p#page (ページのメイン部分、上記のコードに示すように、p にさらに p 構造を追加できます)、p#footer (フッター部分)

このメソッドの実装原理を見てみましょう:
タグ:コンテナの高さのパーセンテージを設定できるように、html タグと body タグで height (高さ) を「100%」に設定する必要があります。同時に、html と body のマージンとパディングを削除する必要があります。つまり、HTML と本文のマージンとパディングは両方とも 0 です。

p#container コンテナは、主に 100% の最小高さ (min-height) を設定する必要があります。コンテンツが少ない（またはまったくない）場合の関数は 100% の高さですが、IE6 では min-height がサポートされていないため、IE6 と互換性を持たせるためには min-height に対して何らかの互換処理を行う必要があることがわかります。詳細については、前のコードを参照してください。さらに、
絶対配置
の後に内部の要素が p#container コンテナから不足しないように、それを p#container コンテナに追加する必要もあります。 p#page コンテナ: p#page コンテナには、このコンテナに設定する必要がある非常に重要な設定があります。padding-bottom 値を設定します。この値は、高さ (高さ) の値と同じ (またはわずかに大きい) 必要があります。もちろん、 p#page の padding-bottom を border-bottom human Water-width で置き換えることもできますが、注意すべき点は、padding- の代わりに margin-bottom
を使用してはいけないということです。 p#footer コンテナ: p#footer コンテナは固定の高さを設定する必要があり、単位は px (または em) です。 p#footer も絶対に配置し、bottom:0 に設定する必要があります。これにより、コンテンツが 1 つのポイントのみの場合に、前述の効果が得られます。 p#footer はコンテナ p#container の下部に固定されます (p#container が min-height:100% を設定しているため) コンテンツの高さが画面の高さを超える場合、p#footer はp#container の下部、つまりページの下部にも固定されています。また、p#footer に「width:100%」を追加してページ全体に拡張することもできます。

その他の p
: 他のコンテナについては、前の p# など、必要に応じて設定できます。ヘッダー、p#left、p#content、p#right など。 利点
: 構造はシンプルで明確で、さまざまなブラウザーでの互換性を実現するために js やハックは必要ありません。また、iPhone にも適しています。
欠点
: 欠点は、p#footer コンテナーに固定の高さを設定する必要があることです。この高さの単位は px または em で、p も変更する必要があります。 #page コンテナーは、正しく機能するために、padding-bottom (または border-bottom-width) を p#footer の高さと同じ (またはわずかに大きい) サイズに設定します。
方法 2
: このメソッドは、フッターの負の margin-top 値を使用して、フッターが常にページの下部に固定されるという効果を実現します。その実装方法を詳しく見てみましょう。 HTMLコード

コードは次のとおりです:

<p id="header">header</p> 
<p id="page" class="clearfix"> 
<p id="left">left sidebar</p> 
<p id="content">main content</p> 
<p id="right">right sidebar</p> 
</p> 
</p> 
<p id="footer">footer</p>

CSSコード

コードは次のとおりです:

html,body{height:100%;margin:0;padding:0;} 
#container{min-height:100%;height:auto !important;height:100%;} 
#page{padding-bottom:60px;/*等于或者大于footer的高度*//*border-bottom-width:60px;边框宽度也可以*/} 
#header{padding:10px;background:lime;} 
#footer{position:relative;margin-top:-60px;/*等于footer的高度*/height:60px;clear:both;background:#c6f;} 
#left{width:18%;float:left;margin-right:2%;background:orange;} 
#content{width:60%;float:left;margin-right:2%;background:yellow;} 
#right{width:18%;float:right;background:green;} 
.clearfix:after{
visibility
:hidden;height:0;font-size:0;display:block;content:" ";clear:both;} 
* html .clearfix{zoom:1;}/* ie6 */ 
*
:first-child
+html .clearfix{zoom:1;} /* ie7 */

上面的代码是最基本的HTML Code，同时你也发现了p#footer和p#container是同辈关系，不像方法一，p#footer在p#container容器内部。当然你也可以根据你的需要把内容增加在p#container容器中，如：一个三列布局，而且还带有header部分。

方法一和方法二有几点是完全相同的，比如说方法一中的1-3三点，在方法二中都一样，换句话说，方法二中也需要把html,body高度设置为100%,并重置margin,padding为0；其二p#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题；其三也需要在p#page容器上设置一个padding-bottom或border-bottom-width值等于p#footer高度值（或略大于）。那么两种方法不同之处是：
p#footer放在p#container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与p#container容器同级，那你需要将此元素进行绝对定位，不然将会破坏p#container容器的min-height值；
p#footer进行margin-top的负值设置，并且此值等于p#footer的高度值，而且也要和p#page容器的padding-bottom(或border-bottom-width)值相等。
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。
缺点：
要给footer设置固定值，因此无法让footer部分自适应高度。

以上がdiv フッター タグの CSS 実装はページの下部に固定されていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。