Comment faire en sorte qu'un div remplisse tout l'écran (css)-tutoriel CSS-php.cn

Comment faire en sorte qu'un div remplisse tout l'écran (css)

不言

Libérer： 2018-05-09 11:41:08

original

4837 Les gens l'ont consulté

Cet article présente principalement la méthode (css) pour faire en sorte que div remplisse tout l'écran. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Il n'y en a que. un dans le corps Lorsque p, vous pouvez utiliser cette méthode pour que p remplisse tout l'écran.

1. Définir le positionnement pour p.

　Review——

Il y a cinq attributs de position en CSS :

static : valeur par défaut, Aucun positionnement

Absolu : Positionnement absolu, positionné par rapport à l'élément parent

Relatif : Positionnement relatif

Fixe : positionnement fixe, positionné par rapport à la fenêtre du navigateur

Hériter : hériter des informations de positionnement de l'élément parent

En plus des valeurs par défaut statique et En plus d'hériter, l'ajout des trois autres peut réaliser une adaptation de la fenêtre.

Le code est le suivant :

 1 <style> 
 2         *{ 
 3             margin: 0; 
 4             padding: 0; 
 5         } 
 6         div{ 
 7             width:100%; 
 8             height: 100%; 
 9             background: yellow;
 10             position: absolute;
 11         }
 12 
 13 </style>
 14 
 15 
 16 <body>
 17 
 18 <div></div>
 19 
 20 </body>

Copier après la connexion

2. Définissez la largeur et la hauteur du code HTML et du corps pour que p remplisse l'écran

 1 <style> 
 2         *{ 
 3             margin: 0; 
 4             padding: 0; 
 5         } 
 6         html,body{ 
 7             width: 100%; 
 8             height: 100%; 
 9         }
 10         div{
 11             width:100%;
 12             height: 100%;
 13             background: yellow;
 14         }
 15 </style>
 16 
 17 <body>
 18 <div></div>
 19 </body>

Copier après la connexion

Ce qui précède est Pour tout le contenu de cet article, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe.

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!