Question

如何强制css网格容器获取单页应用的设备屏幕的整个宽度和高度？修改后的示例来自Mozilla：Firefox documentation

.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>

我不知道如何让这段代码工作。任何想法/建议将不胜感激。

Answer 1

如果您利用width: 100vw;和height: 100vh;，应用了这些样式的对象将延伸到设备的整个宽度和高度。

另请注意，有时可以通过浏览器等将填充和边距添加到视图中。我添加了*全局无填充和边距，因此您可以看到差异。记住这一点。

*{
  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>

Answer 2

为全高页设置的两个重要CSS属性是：

让身体长到与其所需内容一样高的程度。
```
html { height: 100%; }
```
强迫身体不要小于窗户高度。
```
body { min-height: 100%; }
```

只要你使用分数或百分比，你对你的网格做什么是无关紧要的，你应该在所有情况下都是安全的。

Have a look at this common dashboard layout

Answer 3

您可以添加具有position: fixed;属性的top left right bottom 0，该解决方案也适用于较旧的浏览器。

如果要嵌入它，请在包装器中添加position: absolute;，并在包装器外部的div中添加position: relative。

.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>

Answer 4

如果您希望.wrapper为全屏，只需在包装类中添加以下内容：

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

您还可以添加top: 0和left:0

强制css网格容器填满设备的全屏

4 个答案: