CSS Div をスクロール領域を含めてページの高さの 100% に伸ばすにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS Div をスクロール領域を含めてページの高さの 100% に伸ばすにはどうすればよいですか?

DDD

リリース： 2024-10-31 10:20:01

オリジナル

606 人が閲覧しました

How to Make a CSS Div Stretch 100% of Page Height, Including Scrolled Areas?

CSS Div をページの高さ 100% に拡張する

ページの高さ全体を囲むように div を拡張する CSS ソリューションが必要な場合は、スクロール領域を含む、この質問はこれを達成するための HTML/CSS アプローチを求めています。効果。

提示された解決策には、特定の CSS プロパティを削除することが含まれます:

Z-index: 背景表示以外の用途。
左/右: フルハイト用
上/下: 全幅行の場合。

さらに、次の CSS が提供されます:

<code class="css">html {
    min-height: 100%;
    position: relative;
}

body {
    height: 100%;
}

#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1; /* Remove for non-background uses */
}</code>

ログイン後にコピー

次の HTML と一緒に実装すると:

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

ログイン後にコピー

このソリューションは、 #cloud-container div は、スクロール領域を含むページの高さ全体を占めます。提供される説明では、HTML の min-height プロパティとposition プロパティの役割、および希望の結果を達成するために Z-index、左/右、および上/下をどのように調整できるかを強調しています。

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