「コンテナが常に画面全体を埋めるようにするには？」-CSSチュートリアル-php.cn

「コンテナが常に画面全体を埋めるようにするには？」

Susan Sarandon

リリース： 2024-12-07 14:00:22

オリジナル

931 人が閲覧しました

How to Make a `` Container Always Fill the Entire Screen?

確実に全画面表示する方法

コンテンツのサイズに関係なくコンテナ

全画面

を実現します。コンテンツのサイズが異なるコンテナーを使用するのは困難な場合があります。ただし、望ましい結果を一貫して提供する信頼できるソリューションがあります。

解決策:

次の HTML および CSS コードは、一貫して全画面

を保証します。コンテナ:

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
        
        #wrapper {
            min-height: 100%; 
        }
    </style>
</head>

<body>
    <div>

ログイン後にコピー

CSS 内訳:

html、本体: 高さを 100% に設定し、マージンを削除し、コンテナが全体を占めるようにします。 screen.
#wrapper: 最小の高さを 100% に設定し、それを保証します。コンテンツが小さい場合でも、画面に合わせて垂直方向に拡大されます。

互換性:

このソリューションは、IE を含むすべての主要なブラウザーで適切に動作します。 IE 6 以前で最適な表示を行うために、追加の CSS ルールが含まれています:

<!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
<![endif]-->

ログイン後にコピー

使用法:

ドキュメントに HTML と CSS コードを含めるだけです。および任意の

ID「wrapper」を持つ要素は、コンテンツのサイズに関係なく、垂直方向に拡張されて全画面を占めます。

以上が「コンテナが常に画面全体を埋めるようにするには？」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。