フッターをページ下部に固定するCSS実践チュートリアル-CSSチュートリアル-php.cn

フッターをページ下部に固定するCSS実践チュートリアル

高洛峰

リリース： 2017-03-10 11:05:13

オリジナル

1950 人が閲覧しました

この記事では、ページ下部のフッターを修正する実際の CSS の実践を主に紹介します。CSS のクリアの問題に注意してください。必要な場合は、Web ページの

フッターの位置の問題

フッターを参照してください。、通常、ここにヘルプリンクと著作権情報が配置されます。フッターは当然ページの下部に配置されるべきですが、一般的な慣例によれば、フッターより前の Web ページのコンテンツが比較的小さい場合、または垂直解像度が高いモニターを使用している場合、フッターは表示されないことがあります。ページ下部の状況は以下の通りです。

フッターは基本的に Web サイトのすべてのページに共通の部分であり、ページごとにコンテンツの量が異なるため、一部のページに十分なコンテンツがない可能性があり、この問題が発生する可能性があります。さらに、特に背景色を含むフッターの場合、この問題は外観に重大な影響を与えます。

そのため、ページ上のコンテンツの量に関係なく、フッターを正確に下部に配置する必要があります。

フッターを一番下に固定する方法絶対配置は可能ですか？

おそらく誰かがフッターをposition:fixedに設定して一番下に配置することを考えたことがあるでしょう。この属性値をサポートしていない IE6 に関わらず、事実上、Web ページの内容自体が十分であれば、この書き方では最初からブラウザの下部にフッターが表示され、スクロールするとフッターが表示されます。 Web ページでは、フッターは元の位置のままブラウザの下部に表示されます。この効果は明らかにほとんどの Web サイトには適していません。

ご想像のとおり、必要な効果は次のとおりです:

Web ページに多くのコンテンツがある場合、一番下までスクロールしても一番下のフッターのみが表示されます。

Web ページのコンテンツが小さい場合、フッターはページ全体の下部に配置され、残りは空白のままになります。

従来のシンプルな実装方法

CSS Sticky Footer は、フッターを下部に固定する合理的な実装方法を提供します。ただし、これは英語のサイトであり、その記述方法はまだ改善の余地があるため、この記事ではその内容を参照し、合理的な実装方法を示します。

まず、このような HTML 構造が必要です。

<body>  
    <p class="wrapper">  
        <!--网页内容-->  
        <p class="footer_placeholder"></p>  
    </p>  
    <p class="footer">  
        <!--页脚-->  
    </p>  
</body>

ログイン後にコピー

p.wrapper は、フッターを除く Web ページ内のすべてのコンテンツの外部コンテナーであり、フッター p.footer はそれと同じレベルにあります。 p.footer_placeholder は、Web ページ上のすべてのコンテンツの最後、つまり p.wrapper の最後の子要素として配置する必要があります。その機能については後で説明します。

次にCSSを書いて順番に説明していきます。

html, body{height:100%;}

ログイン後にコピー

Webページの内容が不足している場合、実際のbodyやhtmlの高さはブラウザの表示範囲より小さくなる場合がありますので、bodyやhtmlの高さを100%で記述してください。さらに、次の直接の子要素でもパーセント書き込みメソッドが使用されます。パーセント書き込みメソッドは、直接の親要素に特定の高さの定義がある場合にのみ有効である必要があります。

.wrapper{   
    min-height:100%;   
    _height:100%;   
    margin-bottom:-120px;   /*假定页脚的高度为120px*/  
}

ログイン後にコピー

すべての Web コンテンツは、最小の高さを定義するこの p.wrapper 内にあります (IE6 はハックを使用します)。この要素の親要素は、コンテンツの量に関係なく、100% の高さを定義する本体です。、p.wrapper 要素の高さは、ブラウザーの表示範囲全体を占めます。次に、フッターがページコンテンツの最後に正確に表示されるように、フッターの高さに応じて下マージンに等しい負の値を設定します。

.footer, .footer_placeholder{height:120px;}    /*假定页脚的高度为120px*/

ログイン後にコピー

p.footer_placeholder、文字通り、フッターのプレースホルダー要素です。これは単なる空の p で、定義の高さはフッターと同じで、フッターのための場所を残すために存在します。これがないとこんなことが起こるかも知れません↓

フッターをページ下部に固定するCSS実践チュートリアル

この時点で、下部に固定されたフッターが実装されました。 CSS 部分は次のとおりです:

html, body{height:100%;}   
.wrapper{   
    min-height:100%;   
    _height:100%;   
    margin-bottom:-120px;   /*假定页脚的高度为120px*/  
}   
.footer, .footer_placeholder{height:120px;}   
  
如果还需要考虑css初始化和清理浮动，可能你还需要添加下面这部分css：   
  
body{margin:0;}   
.footer_placeholder{clear:both;}

ログイン後にコピー

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