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

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

.wrapper{
显示：网格；
边框样式：实心；
边框颜色：红色；
网格模板列：重复（3，1fr）；
网格模板行：重复（3，1fr）；
栅隙：10px；
}
.一{
边框样式：实心；
边框颜色：蓝色；
网格柱：1/3；
网格行：1；
}
.二{
边框样式：实心；
边框颜色：黄色；
网格柱：2/4；
网格行：1/3；
}
.三{
边框样式：实心；
边框颜色：紫罗兰色；
网格行：2/5；
网格柱：1；
}
.4{
边框样式：实心；
边框颜色：浅绿色；
网格柱：3；
网格行：3；
}
.5{
边框样式：实心；
边框颜色：绿色；
网格柱：2；
网格行：4；
}
.6{
边框样式：实心；
边框颜色：紫色；
网格柱：3；
网格行：4；
}

一个
两个
三
四
五
六

如果您利用

宽度：100vw和<代码>高度：100vh，应用这些样式的对象将拉伸到设备的全宽和全高

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


*{
框大小：边框框；
填充：0；
保证金：0；
}
.包装纸{
显示：网格；
边框样式：实心；
边框颜色：红色；
网格模板列：重复（3，1fr）；
网格模板行：重复（3，1fr）；
栅隙：10px；
宽度：100vw；
高度：100vh；
}
.一{
边框样式：实心；
边框颜色：蓝色；
网格柱：1/3；
网格行：1；
}
.二{
边框样式：实心；
边框颜色：黄色；
网格柱：2/4；
网格行：1/3；
}
.三{
边框样式：实心；
边框颜色：紫罗兰色；
网格行：2/5；
网格柱：1；
}
.4{
边框样式：实心；
边框颜色：浅绿色；
网格柱：3；
网格行：3；
}
.5{
边框样式：实心；
边框颜色：绿色；
网格柱：2；
网格行：4；
}
.6{
边框样式：实心；
边框颜色：紫色；
网格柱：3；
网格行：4；
}

一个
两个
三
四
五
六
如果希望
.wrapper
全屏显示，只需在wrapper类中添加以下内容：


位置：绝对位置；
宽度：100%；
身高：100%

您还可以添加
top:0
和
left:0
两个重要的CSS属性来设置全高页面：

让身体生长到所需的高度

html { height: 100%; }


强制车身不要小于车窗高度

body { min-height: 100%; }


只要你使用分数或百分比，你在任何情况下都应该是安全的

.
您可以添加
位置：固定
具有
左上右下0
属性，该解决方案也适用于较旧的浏览器

如果要嵌入它，请添加
position:absolute到包装，位置：相对于包装外部的div


.wrapper{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
显示：网格；
边框样式：实心；
边框颜色：红色；
网格模板列：重复（3，1fr）；
网格模板行：重复（3，1fr）；
栅隙：10px；
}
.一{
边框样式：实心；
边框颜色：蓝色；
网格柱：1/3；
网格行：1；
}
.二{
边框样式：实心；
边框颜色：黄色；
网格柱：2/4；
网格行：1/3；
}
.三{
边框样式：实心；
边框颜色：紫罗兰色；
网格行：2/5；
网格柱：1；
}
.4{
边框样式：实心；
边框颜色：浅绿色；
网格柱：3；
网格行：3；
}
.5{
边框样式：实心；
边框颜色：绿色；
网格柱：2；
网格行：4；
}
.6{
边框样式：实心；
边框颜色：紫色；
网格柱：3；
网格行：4；
}

一个
两个
三
四
五
六
遗憾的是，这在一般情况下不起作用（即，如果您不知道容器是否处于顶层），因为无论网格嵌套程度如何，vw和vh都与窗口大小相关。^这是正确的。这仅适用于设备宽度/高度，不适用于延伸至其父级全宽/高度的嵌套容器。嵌套容器将需要大小适当的父容器，并带有响应CSS选择器，如%或子容器的ems。请记住，这可能无法与滚动条一起工作。根据，“但是，假设不存在任何滚动条。”对于显示在内容顶部的滚动条，这不是问题，但对于为滚动条添加空间的滚动条（典型），
100vh
或
100vw
，如果存在滚动条，可能会导致在另一个滚动方向上出现不必要的滚动。比较（50vw和无水平滚动条）和（100w和水平滚动条）。如果您仅在body元素上使用vh，并且从父元素到子元素使用百分比，则效果很好。感谢您，为此奋斗了几天！我要说的是，这个答案错误地将旧的CSS方法与新的CSS方法混为一谈，您应该使用公认的答案中更为最新的方法。尽管这个答案可能有效，但它也增加了html+主体元素和被设置样式的元素之间的耦合，因此我建议不要使用这种方法。我认为这个答案错误地将旧的CSS方法与新的CSS方法混为一谈，在这一点上，您应该使用公认的答案的最新方法，事实上，可能会撤消一些CSS网格功能，因此我建议不要使用这种方法。@adarren这是规范中的首选方法（从2016年开始）：使用
宽度
和
高度
得到相同的结果，但代表不同的逻辑：使用
顶部0右0….
方法说：“我想让这个元素填充父元素”，
width