フッターが常に Web ページの下部に表示される仕組みの詳細な説明-htmlチュートリアル-php.cn

フッターが常に Web ページの下部に表示される仕組みの詳細な説明

高洛峰

リリース： 2017-03-20 13:38:08

オリジナル

2239 人が閲覧しました

前回は、Web ページの先頭と末尾を別のファイルとして分離し、すべての Web ページで共有する方が変更に便利であることについて説明しました。ただし、一部のメソッドでは末尾も追従することがわかりました。すぐに頭を下げて中身を押し込みます。。また、一部のページの内容が小さい場合、尻尾を下に絞り込むことができないため、今回は尻尾を下に収める方法を検討します。。

最初に HTML コードを出力します:

<body>
<div class="header">头部</div>

<div class="content">
内容<br />
内容<br />
内容<br />
内容<br />

同上，以下省略N行。。。
</div>

<div class="footer">尾部</div>
</body>

ログイン後にコピー

方法 1: 実際、このメソッドは、ログを記録せずに Web ページを閲覧するのと同じように、Web ページの下部ではなく、常にブラウザウィンドウの下部にある必要があります。または登録すると、常に下にプロンプト情報の行が表示されます。これはおそらくトップに戻るボタンと同じです。。

最後の写真: こんな感じです

フッターが常に Web ページの下部に表示される仕組みの詳細な説明

CSSコード:

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left: 0;bottom: 0;}

ログイン後にコピー

フッターの高さを固定する必要があります

方法2: これはフッターを一番下に作る方法ですwebpage フッターの高さの固定 +絶対配置

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left: 0;bottom: 0;}

ログイン後にコピー

中央のコンテンツ部分にpadding-bottomを追加すると、コンテンツがフッターに隠れずに完全に表示されるようになります。同時に、固定の高さを設定する必要があります。フッター

方法 3: フッターの高さを固定 +マージン負の値

html コードが異なります:

content

content

content

content

上記同様、以下のN行は省略されています。。。

CSSコード:

body{height: 100%;}
.wrap{min-height: 100%;}
.header{height: 100px;background-color: greenyellow;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}

ログイン後にコピー

にpadding-bottomを追加します内容同上

写真付き：

内容が少ない場合：