recherche

Maison >interface Web >tutoriel CSS >Comment faire en sorte qu'un élément Div occupe toujours le plein écran ?

Comment faire en sorte qu'un élément Div occupe toujours le plein écran ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-09 00:20:101036parcourir

How to Make a Div Element Always Occupy the Full Screen?

Comment conserver un fichier
Plein écran quelle que soit la taille du contenu

Problème :

Est-il possible de créer un fichier

L'élément occupe tout l'écran quel que soit le contenu qu'il contient ?

Solution :

L'approche CSS suivante permet d'obtenir systématiquement l'effet souhaité :

<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    #wrapper {
      min-height: 100%; /* This ensures the `#wrapper` is at least as tall as the viewport */
    }
  </style>
</head>

<body>
  <div>

Cette solution est à la fois simple et compatible avec tous les navigateurs. Cela implique de définir quatre attributs CSS :

  • hauteur : 100 % pour le champ et éléments garantit qu'ils remplissent tout l'écran verticalement.
  • marge : 0 pour le et elements supprime toutes les marges ou remplissages par défaut qui pourraient affecter l'effet plein écran.
  • min-height : 100 % pour l'élément #wrapper garantit qu'il est toujours au moins aussi haut que la fenêtre d'affichage, même si son contenu est plus courte. Cela empêche le contenu d'être recadré ou défilable.

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 default this margin padding viewport
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 afficher le texte au survol d'une image en utilisant HTML et CSS ?Article suivant：Comment afficher le texte au survol d'une image en utilisant HTML et CSS ?

Articles Liés

Voir plus