Comment faire en sorte qu'un conteneur remplisse toujours tout l'écran ?

Comment garantir un affichage

Conteneur quelle que soit la taille du contenu

Obtenir un affichage

un conteneur avec des tailles de contenu variables peut être un défi. Cependant, il existe une solution fiable qui fournit systématiquement le résultat souhaité.

Solution :

Le code HTML et CSS suivant garantit un affichage

conteneur :

    <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>Répartition CSS :</strong></p>
<ul>
<li>html, body : définit la hauteur à 100 % et supprime toute marge, garantissant que le conteneur occupe la totalité screen.</li>
<li>#wrapper : définit la hauteur minimale à 100 %, garantissant qu'elle s'étendra verticalement pour s'adapter à l'écran, même si son contenu est petit.</li>
</ul>
<p><strong>Compatibilité :</strong></p>
<p>Cette solution fonctionne bien dans tous les principaux navigateurs, y compris IE. Pour un affichage optimal dans IE 6 ou version antérieure, une règle CSS supplémentaire est incluse :</p>
<pre class="brush:php;toolbar:false"><!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
<![endif]-->

Utilisation :

Incluez simplement le code HTML et CSS dans votre document, et tout

L'élément avec l'ID "wrapper" s'étendra verticalement pour occuper le plein écran, quelle que soit la taille de son contenu.