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;}
このメソッドの実装原理を見てみましょう:
タグ:コンテナの高さのパーセンテージを設定できるように、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 サイトの他の関連記事を参照してください。