强制 css 网格容器填充设备的全屏答案

【问题标题】：force css grid container to fill full screen of device强制 css 网格容器填充设备的全屏
【发布时间】：2017-09-30 12:37:31
【问题描述】：

如何强制 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>

我不确定该怎么做才能使此代码正常工作。任何想法/建议将不胜感激。

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：

遗憾的是，这在一般情况下不起作用（即，如果您不知道您的容器是否位于顶层），因为 vw 和 vh 是相对于窗口的无论网格的嵌套程度如何。
^ 没错。这仅适用于设备宽度/高度，而不是延伸到其父级的全宽/高度的嵌套容器。嵌套容器需要适当大小的父容器，并带有响应式 CSS 选择器，例如子级的 % 或 ems。
请记住，滚动条可能无法按预期工作。根据the spec，“但是，假定不存在任何滚动条。”对于出现在内容顶部的滚动条，这不是问题，但是对于为滚动条增加空间的滚动条（典型），100vh 或100vw 可能会导致另一个滚动条出现不必要的滚动如果存在滚动条，则滚动方向。比较jsfiddle.net/mtgk7vbe/4（50vw 和无水平滚动条）和jsfiddle.net/mtgk7vbe/5（100w 和水平滚动条）。
如果您仅在 body 元素上使用 vh 并在父元素到子元素之间使用百分比，则此方法可以正常工作。
谢谢，为此苦苦挣扎了好几天！

【解决方案2】：

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

让正文增长到其内容所需的高度。
```
html { height: 100%; }
```
强制主体不要小于窗口高度。
```
body { min-height: 100%; }
```

只要你使用分数或百分比，你对束带做什么就无关紧要了。

Have a look at this common dashboard layout.

【讨论】：

我想说这个答案错误地将旧的 CSS 方法与新的方法混合在一起，您应该寻求使用已接受答案的更新方法。虽然这个答案可能有效，但它也增加了 html + body 元素和被设置样式的元素之间的耦合，所以我建议不要使用这种方法。

【解决方案3】：

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

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

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

【讨论】：

我会说这个答案错误地将旧的 CSS 方法与新的方法混合在一起，您应该在其中使用已接受的答案的更新方法，实际上可能正在撤消一些CSS Grid 功能，所以我建议不要使用这种方法。
@adarren 这是规范中的首选方法（从 2016 年开始）：w3.org/TR/css-position-3/#abs-pos 使用 width 和 height 最终结果相同，但代表不同类型的逻辑：使用 @ 987654330@ 方法说：“我希望这个元素填充父元素”，width height 说“我希望这个元素具有与父元素可以包含的大小相同的大小”

【解决方案4】：

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

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

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

【讨论】：