Comment faire en sorte qu'un conteneur remplisse toujours tout l'écran ?-tutoriel CSS-php.cn

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>

Copier après la connexion

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

Copier après la connexion

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!

source：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：Pourquoi `:first-child` ne sélectionne-t-il pas mon H1 ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2187

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2334

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1962

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...