forcer le conteneur de la grille css à remplir le plein écran de l'appareil

Question

forcer le conteneur de la grille css à remplir le plein écran de l'appareil

Demandé el 2 de Mai, 2017: Quand la question a-t-elle été
58173 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Comment forcer un conteneur de grille css à prendre toute la largeur et la hauteur de l'écran de l'appareil pour une application à page unique ? L'exemple modifié provient de Mozilla : Documentation de Firefox

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}

<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

Je ne suis pas sûr de ce qu'il faut faire pour que ce code fonctionne.

Demandé el 2 de Mai, 2017 par metrix

Answer 1

4 Réponses

Answer 2

155voto

Illdapt Points 1807

Si vous profitez de width: 100vw; y height: 100vh; Si l'on applique ces styles à l'objet, celui-ci s'étendra sur toute la largeur et la hauteur de l'appareil.

Notez également que les navigateurs et autres peuvent parfois ajouter des marges à votre affichage. J'ai ajouté un * global sans rembourrage ni marges pour que vous puissiez voir la différence. Gardez ceci à l'esprit.

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}

<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

Répondu el 2 de Mai, 2017 par Illdapt (1807 Points )

12 votes

Malheureusement, cela ne fonctionnera pas dans le cas générique (c'est-à-dire si vous ne savez pas si votre conteneur est au niveau supérieur ou non) car vw et vh sont relatifs à la taille de la fenêtre, quel que soit le degré d'imbrication de votre grille.

Commenté el 11 de Février, 2018 par Michael

2 votes

^ C'est exact. Cela concerne uniquement la largeur/hauteur du périphérique, et non les conteneurs imbriqués qui s'étendent sur toute la largeur/hauteur de leur parent. Les conteneurs imbriqués auront besoin de conteneurs parents de taille appropriée avec des sélecteurs CSS réactifs tels que % ou ems pour les enfants.

Commenté el 12 de Février, 2018 par Illdapt

0 votes

Gardez à l'esprit que cela peut ne pas fonctionner comme prévu avec les barres de défilement. Par la spécification "Cependant, les barres de défilement sont supposées ne pas exister." Avec les barres de défilement qui apparaissent sur le dessus de contenu, ce n'est pas un problème, mais avec les barres de défilement qui ajoutent de l'espace pour la barre de défilement (typique), 100vh o 100vw peut provoquer un défilement indésirable dans l'autre sens de défilement si une barre de défilement est présente. Comparez jsfiddle.net/mtgk7vbe/4 (50vw et pas de barre de défilement horizontale) et jsfiddle.net/mtgk7vbe/5 (100w et une barre de défilement horizontale).

Commenté el 14 de Février, 2019 par bfrohs

Afficher 3 autres commentaires

Answer 3

17voto

Fleuv Points 581

Voici deux propriétés CSS importantes à définir pour les pages pleine hauteur :

Permettez au corps de se développer autant que le contenu qu'il contient l'exige.
```
html { height: 100%; }
```
Forcez le corps à ne pas devenir plus petit que la hauteur de la fenêtre.
```
body { min-height: 100%; }
```

Ce que vous faites avec votre ceinture n'a pas d'importance, tant que vous utilisez des fractions ou des pourcentages, vous devriez être en sécurité dans tous les cas.

Jetez un coup d'œil à cette présentation courante du tableau de bord. .

Répondu el 21 de Février, 2018 par Fleuv (581 Points )

4 votes

Je dirais que cette réponse mélange de manière incorrecte les anciennes approches CSS avec les nouvelles, alors que vous devriez chercher à utiliser l'approche plus récente de la réponse acceptée. travail En outre, cela ajoute un couplage entre les éléments html + body et l'élément à styliser, et je déconseille donc cette approche.

Commenté el 8 de Août, 2018 par a darren

0 votes

Définissez également la largeur à 100%.

Commenté el 27 de Janvier, 2022 par Cybernetic

Answer 4

12voto

Peter Points 1124

Vous pouvez ajouter position: fixed; avec top left right bottom 0 cette solution fonctionne également sur les anciens navigateurs.

Si vous voulez l'intégrer, ajoutez position: absolute; au wrapper, et position: relative au div situé à l'extérieur de l'enveloppe.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}

<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

Répondu el 27 de Juin, 2018 par Peter (1124 Points )

2 votes

Je dirais que cette réponse mélange de manière incorrecte d'anciennes approches CSS avec de nouvelles, alors que vous devriez chercher à utiliser l'approche plus à jour de la réponse acceptée, et en fait, cela peut annuler certaines des fonctionnalités de la grille CSS, donc je déconseille cette approche.

Commenté el 8 de Août, 2018 par a darren

1 votes

@adarren C'est la méthode privilégiée dans la spécification (depuis 2016) : w3.org/TR/css-position-3/#abs-pos en utilisant width y height aboutit au même résultat, mais représente un autre type de logique : l'utilisation du top 0 right 0.... dit : "Je veux que cet élément remplisse l'élément parent", width height dit "Je veux que cet élément ait la même taille que l'élément parent peut contenir".

Commenté el 9 de Août, 2018 par Peter

0 votes

Cela fonctionne beaucoup mieux pour moi (sur Firefox) que la réponse acceptée. La réponse acceptée me donne des barres de défilement et modifie la taille par rapport au document principal.

Commenté el 8 de Novembre, 2022 par tedtanner

Answer 5

-10voto

Diogo Bernardelli Points 198

Si vous voulez le .wrapper pour être en plein écran, il suffit d'ajouter ce qui suit dans la classe wrapper :

position: absolute; width: 100%; height: 100%;

Vous pouvez également ajouter top: 0 y left:0

Répondu el 2 de Mai, 2017 par Diogo Bernardelli (198 Points )

forcer le conteneur de la grille css à remplir le plein écran de l'appareil

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

forcer le conteneur de la grille css à remplir le plein écran de l'appareil

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: