ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS は、ページコンテンツの高さが十分でなく、フッターが常にページの下部にあるという効果を実現します。
CSS は、ページコンテンツの高さが十分でなく、フッターが常にページの下部にあるという効果を実現します。
- 青灯夜游転載
- 2018-10-11 17:47:162414ブラウズ
この記事では、CSS を使用して、ページのコンテンツが十分に高くなく、フッターが常にページの下部に表示されるようにする方法を紹介します。必要な友達はそれを参照できます。 . ご参考になれば幸いです。
ページを開発するときに、多くのフロントエンド エンジニアがこの状況に遭遇すると思います。ページ全体の高さがディスプレイの 1 画面を占めるのに十分ではなく、フッターがページの下部にない場合フッターを常にページの下部に配置するには、
1.min-height を使用して中央のコンテンツの高さを制御することを考えるとよいでしょう。ただし、大きな Web サイトのページはモジュール形式で追加されることが多く、各ページの高さの最小値を設定することはできません。 -各ページの中央にあるコンテンツ領域の高さ、およびユーザーの表示画面のサイズは異なるため、最小高さの高さを設定しても、ユーザーがフッターを確実に表示できることを保証することはできません。ページが下部にない、またはスクロール バーがページに表示されない。
2. フッターの固定位置: フッターは本文の固定位置に対して下部に表示されます。ただし、ページにスクロール バーがあり、ページがスクロールすると、フッターがコンテンツ領域の上に一時停止する可能性があります。おそらく、上記のどれもあなたが望む効果ではありません。
次の例の方法を使用して問題を解決できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猿来是勇者</title>
</head>
<!--方法一-->
<style>
*{margin: 0; padding: 0;}
html,body{height:100%;}
#container{position:relative; width:100%; min-height:100%;padding-bottom: 100px; box-sizing: border-box;}
header{width: 100%; height: 200px; background: #999;}
.main{width: 100%; height: 200px; background: orange;float:left;}
footer{width: 100%; height:100px; /* footer的高度一定要是固定值*/ position:absolute; bottom:0px; left:0px; background: #333;} </style>
<body>
<p id="container">
<header>HEADER</header>
<section class="main">MAIN</section >
<footer>FOOTER</footer>
</p>
</body>
<!--方法二-->
<!--<style>
*{margin: 0; padding: 0;}
html,body{height: 100%;}
#container{display: flex; flex-direction: column; height: 100%;}
header{background: #999; flex: 0 0 auto;height:100px;}
.main{flex: 1 0 auto;}
.bg{background:orange;height:200px;}
footer{background: #333; flex: 0 0 auto;height:100px;} </style>
<body>
<p id="container">
<header>HEADER</header>
<section class="main">
<p class="bg">MAIN</p>
</section>
<footer>FOOTER</footer>
</p>
</body>-->
</html>
概要: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS ビデオ チュートリアル をご覧ください。
以上がCSS は、ページコンテンツの高さが十分でなく、フッターが常にページの下部にあるという効果を実現します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。