CSS-Grid-Container zwingen, den Vollbildmodus des Geräts zu füllen

71

Wie erzwinge ich, dass ein CSS-Rastercontainer die volle Breite und Höhe des Gerätebildschirms für eine App mit nur einer Seite übernimmt? Das geänderte Beispiel stammt aus der Mozilla: Firefox-Dokumentation

.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>
Erweitern Sie das Snippet
Ich bin nicht sicher, was ich tun soll, damit dieser Code funktioniert. Irgendwelche Ideen / Vorschläge würden geschätzt.

html css css-grid metrix
quelle

Antworten:

114

Wenn Sie nutzen width: 100vw;und height: 100vh;beantragte das Objekt mit dieser Stile werden auf die volle Breite und Höhe der Vorrichtung strecken.

Beachten Sie auch, dass es manchmal Auffüllungen und Ränder gibt, die Ihrer Ansicht durch Browser und dergleichen hinzugefügt werden können. Ich habe ein *globales No-Padding und Ränder hinzugefügt, damit Sie den Unterschied sehen können. Denken Sie daran.

*{
  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>
Erweitern Sie das Snippet

NSTuttle
quelle
6
Leider funktioniert dies im allgemeinen Fall nicht (dh wenn Sie nicht wissen, ob sich Ihr Container auf der obersten Ebene befindet oder nicht), da vw und vh relativ zur Fenstergröße sind, unabhängig davon, wie verschachtelt Ihr Raster ist .
Michael
2
^ Das ist richtig. Dies gilt nur für Gerätebreite / -höhe, nicht für verschachtelte Container, die sich bis zur vollen Breite / Höhe des übergeordneten Containers erstrecken. Verschachtelte Container benötigen übergeordnete Container mit angemessener Größe und reaktionsschnellen CSS-Selektoren wie% oder ems für die untergeordneten Container.
NSTuttle
Beachten Sie, dass dies mit Bildlaufleisten möglicherweise nicht wie vorgesehen funktioniert. Gemäß der Spezifikation "Es wird jedoch davon ausgegangen, dass keine Bildlaufleisten vorhanden sind." Bei Bildlaufleisten, die über dem Inhalt angezeigt werden, ist dies kein Problem, aber bei Bildlaufleisten, die Platz für die Bildlaufleiste bieten (typisch) 100vhoder bei 100vwVorhandensein einer Bildlaufleiste zu unerwünschtem Bildlauf in die andere Bildlaufrichtung führen können. Vergleichen Sie jsfiddle.net/mtgk7vbe/4 (50vw und keine horizontale Bildlaufleiste) und jsfiddle.net/mtgk7vbe/5 (100w und eine horizontale Bildlaufleiste).
0b10011
Dies funktioniert einwandfrei, wenn Sie vh nur für das body-Element und Prozent vom übergeordneten zum untergeordneten Element verwenden.
user2705463
12

Zwei wichtige CSS-Eigenschaften, die für Seiten mit voller Höhe festgelegt werden müssen, sind folgende:

  1. Lassen Sie den Körper so hoch wachsen, wie es der Inhalt erfordert.

    html { height: 100%; }

  2. Erzwingen Sie, dass der Körper nicht kleiner als die Fensterhöhe wird.

    body { min-height: 100%; }

Was Sie mit Ihrem Gürtel machen, ist irrelevant, solange Sie Brüche oder Prozentsätze verwenden, sollten Sie in jedem Fall sicher sein.

Schauen Sie sich dieses allgemeine Dashboard-Layout an .

luukvhoudt
quelle
2
Ich würde sagen, dass diese Antwort ältere CSS-Ansätze fälschlicherweise mit neuen mischt, wobei Sie versuchen sollten, den aktuelleren Ansatz der akzeptierten Antwort zu verwenden. und obwohl diese Antwort möglicherweise funktioniert , fügt sie auch eine Kopplung zwischen den HTML + -Körperelementen und dem zu gestaltenden Element hinzu, sodass ich gegen diesen Ansatz empfehlen würde.
ein Darren
8

Sie können position: fixed;mit top left right bottom 0Attribut hinzufügen , dass diese Lösung auch in älteren Browsern funktioniert.

Wenn Sie es einbetten möchten, fügen Sie position: absolute;es dem Wrapper und position: relativedem Div außerhalb des Wrappers hinzu.

.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>
Erweitern Sie das Snippet

Peter
quelle
Ich würde sagen, dass diese Antwort ältere CSS-Ansätze fälschlicherweise mit neuen mischt, wobei Sie versuchen sollten, den aktuelleren Ansatz der akzeptierten Antwort zu verwenden, und tatsächlich möglicherweise einige der CSS-Grid-Funktionen rückgängig machen. Ich empfehle gegen diesen Ansatz.
ein Darren
1
@adarren Dies ist die bevorzugte Methode in der Spezifikation (ab 2016): w3.org/TR/css-position-3/#abs-pos verwendet widthund heightendet mit demselben Ergebnis, stellt jedoch eine andere Art von Logik dar: Verwenden der top 0 right 0.... Methode sagt : "Ich möchte, dass dieses Element das übergeordnete Element ausfüllt", width heightsagt "Ich möchte, dass dieses Element dieselbe Größe hat, die das übergeordnete Element enthalten kann"
Peter
-8

Wenn Sie möchten .wrapper, dass das Vollbild angezeigt wird, fügen Sie einfach Folgendes in die Wrapper-Klasse ein:

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

Sie können auch hinzufügen top: 0undleft:0

Diogo Bernardelli
quelle