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

71

如何为单个页面应用程序强制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>
展开摘要
我不确定如何使此代码正常工作。任何想法/建议，将不胜感激。

html  css  css-grid 
— 梅特克斯
source

Answers:

114

如果您利用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>
展开摘要

— NSTuttle
source
6
可悲的是，这在一般情况下是行不通的（即，如果您不知道您的容器是否处于顶层），因为vw和vh与窗口大小有关，而与网格的嵌套方式无关。
— 迈克尔
2
^是正确的。这仅适用于设备的宽度/高度，不适用于拉伸到其父容器的整个宽度/高度的嵌套容器。嵌套容器将需要具有相应CSS选择器（如子级的％或ems）的适当大小的父容器。
— NSTuttle
请记住，这可能不适用于滚动条。按照规范，“但是，假定不存在任何滚动条。” 对于出现在内容顶部的滚动条，这不是问题，但是使用滚动条会为滚动条增加空间（典型值），100vh或者100vw如果存在滚动条，则可能会在另一个滚动方向上引起不必要的滚动。比较jsfiddle.net/mtgk7vbe/4（50vw，没有水平滚动条）和jsfiddle.net/mtgk7vbe/5（100w，有水平滚动条）。
— 0b10011
如果仅在body元素上使用vh，并且在父元素到子元素之间使用百分比，则效果很好。
— user2705463
13

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

  1. 让身体生长到所需的高度。

    html { height: 100%; }

  2. 强制身体不要小于窗口高度。

    body { min-height: 100%; }

只要您使用分数或百分数，您对围栏所做的操作都是无关紧要的，只要在任何情况下都应该安全。

看一下这种常见的仪表板布局。

— Luukvhoudt
source
2
我想说这个答案是错误地将旧的CSS方法与新的CSS方法混合在一起，您应该在这里使用公认的答案的最新方法。尽管此答案可能有效，但它还会在html + body元素和要设置样式的元素之间添加耦合，因此，我建议不要使用这种方法。
— 达伦（Darren）'18年
8

您可以添加position: fixed;使用top left right bottom 0旧版浏览器上的属性，该解决方案的工作了。

如果要嵌入它，请添加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>
展开摘要

— 彼得
source
我会说这个答案是错误地将旧的CSS方法与新的CSS方法混合在一起，您应该在这里使用公认的答案的最新方法，实际上可能是在撤消某些CSS Grid功能，所以我d建议不采用这种方法。
— 达伦（Darren）
1
@adarren这是规范中的首选方法（自2016年起）：w3.org/TR/css-position-3/#abs-pos 使用width和height得出相同的结果，但表示不同种类的逻辑：使用该top 0 right 0.... 方法表示：“我希望此元素填充父元素”，width height说：“我希望此元素的大小与父元素可以包含的大小相同”
— Peter
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.