CSS のみを使用して Div スパンをページの高さの 100% にする方法

JavaScript を使用せずに Div をページの高さ 100% に拡大する方法

Web ページのデザインでは、ナビゲーション バーを作成したいと思うのが一般的です。または、ビューポートの表示領域だけでなく、ページの高さ全体にわたるその他の要素。これを実現するために、純粋な CSS ソリューションを検討してみましょう。

CSS ソリューション:

html {
    min-height: 100%; /* Ensure it's as tall as the viewport */
    position: relative;
}
body {
    height: 100%; /* Force body to match HTML's height */
}
#navigation-bar {
    position: absolute;
    top: 0; /* Top edge of the page */
    bottom: 0; /* Bottom edge of the page */
    left: 0; /* Left edge of the page */
    right: 0; /* Right edge of the page */
}

この CSS は、ナビゲーション バー要素をビューポート内に絶対的に配置し、確実に配置します。スクロール制限なしでページ全体の高さを埋めます。

説明:

• html は、ビューポートと一致するように最小の高さを 100% に設定します。 。これにより、div がクリップされるのを防ぎます。
• body は、高さを 100% に設定して、HTML 要素の高さと強制的に一致させます。
• position:Absolute は通常のドキュメント フローから div を削除し、ビューポート内に配置できるようにします。
• top: 0 および bottom: 0 は div を完全に拡張します。ページの高さ。

追加メモ:

• フルハイトの列の場合は、left または を削除します。 #navigation-bar セレクターから >右。
• 全幅の行の場合は、上 または 下 を削除します。
• の場合div は背景として意図されていないため、セレクターから z-index: -1; を削除してください。

以上がCSS のみを使用して Div スパンをページの高さの 100% にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。