ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSを使用してフッターをブラウザの下部に貼り付けるにはどうすればよいですか?

CSSを使用してフッターをブラウザの下部に貼り付けるにはどうすればよいですか?

Patricia Arquette
リリース: 2024-10-31 16:37:30
オリジナル
428 人が閲覧しました

How to Make a Footer Stick to the Bottom of the Browser Using CSS?

CSS を使用してブラウザの下部にフッターを固定する方法

フッターをブラウザの下部に配置するという課題に直面するとき、一般的な障害の 1 つは次のとおりです。ウィンドウの中央に永続的に表示されます。この問題を解決するには、次の CSS スタイルを使用できます:

  • HTML 構造を決定します:
<code class="HTML"><form>
...
<div class="Main" />
<div id="Footer" />
</form></code>
ログイン後にコピー
  • 関連する CSS を定義します:
<code class="CSS">* {
    margin: 0;
}

html, body {
    height: 100%;
}

#Footer {
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 4em;
}

.Main {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;

    margin: 0 25% -4em 25%;

    font-family: Verdana, Arial, Tahoma, Times New Roman;
    font-size: 0.8em;
    word-spacing: 1px;
    line-height: 170%;
}</code>
ログイン後にコピー

これらのスタイルは、フッターの位置を絶対位置、下部を 0 として指定し、フッターがブラウザーの下部に固定されたままになるようにします。

以上がCSSを使用してフッターをブラウザの下部に貼り付けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート