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

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

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

全画面

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

解決策:

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

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

    <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>



    <div>
<p><strong>CSS 内訳:</strong></p>
<ul>
<li>html、本体: 高さを 100% に設定し、マージンを削除し、コンテナが全体を占めるようにします。 screen.</li>
<li>#wrapper: 最小の高さを 100% に設定し、それを保証します。コンテンツが小さい場合でも、画面に合わせて垂直方向に拡大されます。</li>
</ul>
<p><strong>互換性:</strong></p>
<p>このソリューションは、IE を含むすべての主要なブラウザーで適切に動作します。 IE 6 以前で最適な表示を行うために、追加の CSS ルールが含まれています:</p>
<pre class="brush:php;toolbar:false"><!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
<![endif]-->

使用法:

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

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