Comment faire en sorte qu'un élément Div occupe toujours le plein écran ?-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-12-09 00:20:10

original

972 Les gens l'ont consulté

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>

Copier après la connexion

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!