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

Question

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

109

如何强制CSS网格容器占据整个设备屏幕的宽度和高度，用于单页应用程序？修改后的示例来自Mozilla：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>

我不确定该怎么做才能让这段代码正常工作。

- metrix

4个回答

17

设置完整高度页面的两个重要CSS属性是这些：

允许body元素根据其内容自动增长高度。
```
html { height: 100%; }
```
强制网页主体高度不小于窗口高度。

body { min-height: 100%; }

只要您使用分数或百分比，您对格子的操作并不重要，您在任何情况下都应该是安全的。

看一下这个常见的仪表盘布局。

- luukvhoudt

6

我认为这个答案错误地混合了旧的CSS方法和新的方法，你应该使用被接受的答案更为现代化的方法。虽然这个答案可能“可行”，但它也增加了HTML + body元素与被样式化元素之间的耦合度，所以我建议不要采用这种方法。 - Darren Shewry

将宽度设置为100%。 - Cybernetic

11

您可以添加属性position: fixed; top: 0; left: 0; right: 0; 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>

- Peter

2

我认为这个答案错误地混合了旧的CSS方法和新的方法，你应该使用被接受的答案更为现代化的方法，实际上可能会撤销一些CSS Grid的功能，所以我建议不要采用这种方法。 - Darren Shewry

1

@adarren 这是规范中的首选方法（来自2016年）：https://www.w3.org/TR/css-position-3/#abs-pos 使用 width 和 height 最终得到相同的结果，但代表不同的逻辑：使用 top 0 right 0.... 方法表示：“我希望这个元素填满父元素”，width height 表示：“我希望这个元素具有与父元素相同的尺寸”。 - Peter

1

这对我来说（在Firefox上）比被接受的答案更好。被接受的答案会给我滚动条，并且相对于主文档改变大小。 - tedtanner

-12

如果您想让 .wrapper 充满整个屏幕，只需在 wrapper 类中添加以下内容：


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

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

- Diogo Bernardelli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NSTuttle · Accepted Answer

如果你使用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>