CSS のみを使用して Div をページの高さ 100% に拡大できますか?-CSSチュートリアル-php.cn

CSS のみを使用して Div をページの高さ 100% に拡大できますか?

Barbara Streisand

リリース： 2024-10-30 23:48:29

オリジナル

747 人が閲覧しました

Can You Stretch a Div to 100% Page Height Using Only CSS?

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

Web ページの美しさと機能を向上させるには、多くの場合、Web ページの特定の部分を占めるように要素を正確に配置する必要があります。ページ。一般的な要件の 1 つは、ナビゲーションメニューまたはサイドバーをビューポートの高さ全体に広げ、スクロールしたときに表示される領域を超えて拡張することです。

JavaScript なしで実行できますか?

そのような機能が HTML と CSS のみを使用して実現できるかどうかという疑問が開発者によって提起されています。答えは、完全にイエスです。

解決策

この問題を解決するには、次の CSS の変更を検討してください:

z- を削除します。
全高の列の場合は左または右を省略します。
全幅の行の場合は上または下を除外します。

解決策を示す CSS コードの例を次に示します。

<code class="css">html {
    min-height: 100%; /* ensures minimum viewport height */
    position: relative;
}
body {
    height: 100%; /* matches the height of the HTML element */
}
#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}</code>

ログイン後にコピー

付随する HTML コード:

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

ログイン後にコピー

根拠

html {最小高さ: 100%; Position:relative;} 宣言により、cloud-container div が HTML レイアウト内に残り、正確な高さの計算が可能になります。

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS のみを使用して Div をページの高さ 100% に拡大できますか?