Maison >interface Web >tutoriel CSS >Comment faire en sorte qu'un conteneur remplisse toujours tout l'écran ?

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

Susan Sarandonoriginal: 2024-12-07 14:00:22974parcourir

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

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 :

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

Répartition CSS :

html, body : définit la hauteur à 100 % et supprime toute marge, garantissant que le conteneur occupe la totalité screen.
#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.

Compatibilité :

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 :

<!--[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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html if for include this display margin

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je extraire la valeur de rotation de la transformation CSS d'un élément à l'aide de jQuery ?Article suivant：Comment puis-je extraire la valeur de rotation de la transformation CSS d'un élément à l'aide de jQuery ?

Articles Liés

Voir plus