Comment puis-je faire en sorte qu'un élément Div remplisse toujours toute la hauteur de l'écran ?

Maintenir un mode plein écran

Quel que soit le contenu

Création d'un fichier

Un élément occupant toute la hauteur verticale de l'écran, quel que soit son contenu, constitue un défi courant en matière de développement Web. Est-ce faisable ?

Solution

L'approche CSS suivante obtient systématiquement cet effet :

html, body {
  height: 100%;
  margin: 0;
}

#wrapper {
  min-height: 100%;
}

Cette solution fonctionne en :

• Définition des attributs height et margin sur 0 pour les éléments html et body afin d'éliminer le navigateur marges.
• Régler la hauteur minimale sur 100 % pour l'élément #wrapper afin de garantir qu'il occupe tout l'espace vertical disponible.

Notes supplémentaires

• Pour les anciennes versions d'Internet Explorer (IE6 et inférieures), une règle CSS supplémentaire est nécessaire pour forcer #wrapper à prendre en charge la totalité hauteur de l'écran.
• L'utilisation de min-height au lieu de height permet au contenu supplémentaire de s'étendre au-delà de la hauteur de l'écran, si nécessaire.

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 empêcher les mots longs de briser mes mises en page Div ? Article suivant：Comment puis-je empêcher les mots longs de sortir de mes div ?

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

• Comment puis-je lire et écrire efficacement des fichiers binaires en C en évitant les problèmes de mise en mémoire tampon ?
  2024-12-12 20:45:14
• Comment puis-je obtenir les délais de création et de modification de fichiers multiplateformes en Python ?
  2024-12-12 20:44:10
• Quelle est la meilleure approche pour les sauvegardes automatisées de bases de données MySQL ?
  2024-12-12 20:43:15
• Pourquoi mon service Android ne démarre-t-il pas au démarrage ?
  2024-12-12 20:42:18
• Comment puis-je obtenir le répertoire de packages correct dans Go lors de l'utilisation de « ioutil.ReadFile() » dans les tests ?
  2024-12-12 20:41:10
• Comment s'authentifier à l'aide de certificats clients en Java HTTPS ?
  2024-12-12 20:40:13
• Comment afficher des images stockées dans une base de données MySQL en utilisant PHP et HTML ?
  2024-12-12 20:39:09
• Comment puis-je accéder aux fichiers statiques dans un package Python ?
  2024-12-12 20:38:10
• Comment puis-je étendre une division flottante jusqu'à la hauteur de son parent ?
  2024-12-12 20:37:09
• Comment `enable_shared_from_this` résout-il le problème de la création de `shared_ptr` sécurisés vers `this` ?
  2024-12-12 20:36:14

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

0

3

2165

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

0

11

2313

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

0

1

1950

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

Depuis 2024-04-18 23:52:34

0

1

1826

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

1879

Rubriques connexes

Plus>

• Comment résoudre l'erreur d'identifiant MySQL invalide
• Comment supprimer des pages vierges dans Word sans affecter les autres formats
• js utilisation partagée
• utilisation de la fonction stripslashes
• Comment copier un tableau Excel pour lui donner la même taille que l'original
• Introduction à l'utilisation de vscode
• Linux ajoute une méthode de source de mise à jour
• Utilisation de base de l'instruction insert