JavaScript を使用せずに CSS Div をページの高さ 100% に拡大するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-10-31 06:32:30

オリジナル

160 人が閲覧しました

How to Stretch a CSS Div to 100% Page Height Without JavaScript?

JavaScript を使用せずに CSS Div をページの高さ 100% に拡張する

Web サイトのユーザーエクスペリエンスを強化するには、ページ要素が期待どおりに動作するようにする必要があります。。一般的な要件の 1 つは、ビューポートサイズやスクロールに関係なく、ナビゲーションバーやその他の要素を垂直方向に伸ばしてページの高さ全体を埋めることです。 JavaScript でもこれを実現できますが、純粋な HTML/CSS ソリューションには、柔軟性や実装の容易さなどの利点があります。

解決策:

さまざまなアプローチを試した結果、次のようになります。 DIV をページの高さ 100% に拡張するための最適なソリューションとして CSS と HTML 構造が登場しました:

<code class="css">/* Ensure the HTML element stretches to the full page height */
html {
    min-height: 100%;
    position: relative;
}

/* Force the body element to match the HTML element's height */
body {
    height: 100%;
}

/* Position the DIV container absolutely and stretch it to all sides */
#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1; /* Only applies to background elements */
}</code>

ログイン後にコピー

<code class="html"><!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html></code>

ログイン後にコピー

説明:

HTML 要素が作成されます測定値の参照と相対的に配置され、その子要素がレイアウトから削除されるのを防ぎます。 body 要素の高さは 100% に設定され、html 要素の高さと確実に一致します。

#cloud-container DIV の絶対位置と、top/bottom/left/right を 0 に設定すると、次のことが保証されます。利用可能なスペース全体を占有します。 overflow: hidden プロパティは、コンテンツがコンテナからオーバーフローするのを防ぎます。

根拠:

#cloud-container DIV を html 要素の子として配置し、次を使用します。 html 要素のposition:relativeプロパティを使用すると、コンテンツがビューポートより長い場合でも、ページの高さ全体を占めることが保証されます。このアプローチは堅牢であり、さまざまなブラウザ間で広く互換性があります。

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