ホームページ > 記事 > ウェブフロントエンド > フッターが常に Web ページの下部に表示される仕組みの詳細な説明
フッターが常に Web ページの下部に表示される仕組みの詳細な説明
- 高洛峰オリジナル
- 2017-03-20 13:38:082235ブラウズ
前回は、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 ページの下部ではなく、常にブラウザ ウィンドウの下部にある必要があります。または 登録すると、常に下にプロンプト情報の行が表示されます。これはおそらくトップに戻るボタン と同じです。 。
最後の写真: こんな感じです
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 コードが異なります:head
content
content
content
content
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を追加します内容 同上
写真付き：
内容が少ない場合：
以上がフッターが常に Web ページの下部に表示される仕組みの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。