JavaScript を使用せずに CSS Div をページの高さの 100% に伸ばすにはどうすればよいですか?

CSS Div をページの高さの 100% に伸ばす方法

Web デザインの世界では、要素を高さ全体に伸ばすことが望ましい場合がよくあります。スクロールによってアクセスできる非表示の領域を含むページの。これは、サイドバー、ヘッダー、フッターを作成する場合に特に便利です。

JavaScript に頼らずにこの効果を実現するには、CSS ソリューションを検討してみましょう。

CSS ソリューション

div をページの高さの 100% まで伸ばす鍵は、HTML 要素と body 要素の関係を理解することにあります。コードは次のとおりです:

<code class="css">html {
    min-height: 100%; /* Ensure HTML is at least as tall as the viewport */
    position: relative; /* Make HTML box layout reference for divs */
}

body {
    height: 100%; /* Force BODY to match HTML height */
}

#my-div {
    position: absolute; /* Take div out of document flow */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden; /* Hide overflow for aesthetic purposes */
    z-index: -1; /* Remove this line for non-background uses */
}</code>

説明

• html: HTML 要素の最小の高さを確実に設定します。少なくともビューポートと同じ高さ。位置: 相対的。 HTML ボックスを div の参照にします。
• body: body 要素が HTML 要素の高さと一致するように強制します。これにより、ページ全体が高さいっぱいに伸びることが保証されます。
• #my-div: Position:Absolute; を使用して、ドキュメント フローから div を削除し、top、bottom を使用して絶対的に配置します。 、左、および右のプロパティ。オーバーフロー: 非表示。

このアプローチに従うことで、ページの高さ全体に広がる CSS div を簡単に作成でき、Web デザインの柔軟性が高まります。

以上がJavaScript を使用せずに CSS Div をページの高さの 100% に伸ばすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。