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 サイトの他の関連記事を参照してください。