Html 强制css网格容器填充设备的全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43747185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
force css grid container to fill full screen of device
提问by metrix
How do I force a css grid container take the full width and height of the device screen for a single page app? Modified example is from Mozilla: Firefox documentation
如何强制 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>回答by NSTuttle
If you take advantage of width: 100vw;and height: 100vh;, the object with these styles applied will stretch to the full width and height of the device.
如果您利用width: 100vw;和height: 100vh;，应用了这些样式的对象将拉伸到设备的整个宽度和高度。
Also note, there are times padding and margins can get added to your view, by browsers and the like. I added a *global no padding and margins so you can see the difference. Keep this in mind.
另请注意，浏览器等有时会向您的视图添加填充和边距。我添加了一个*全局无填充和边距，以便您可以看到差异。记住这一点。
*{
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>回答by Fleuv
Two important CSS properties to set for full height pages are these:
为全高页面设置的两个重要 CSS 属性是：
Allow the body to grow as high as the content in it requires.
html { height: 100%; }Force the body not to get any smaller than then window height.
body { min-height: 100%; }
让身体长到它所需要的含量。
html { height: 100%; }强制主体不要小于窗口高度。
body { min-height: 100%; }
What you do with your gird is irrelevant as long as you use fractions or percentages you should be safe in all cases.
只要您使用分数或百分比，您对网格的处理就无关紧要，您在所有情况下都应该是安全的。
回答by Peter
You can add position: fixed;with top left right bottom 0attribute, that solution work on older browsers too.
您可以添加position: fixed;使用top left right bottom 0旧版浏览器上的属性，该解决方案的工作了。
If you want to embed it, add position: absolute;to the wrapper, and position: relativeto the div outside of the wrapper.
如果要嵌入它，请添加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>回答by Diogo Bernardelli
If you want the .wrapperto be fullscreen, just add the following in the wrapper class:
如果您希望.wrapper全屏显示，只需在包装类中添加以下内容：
position: absolute;
width: 100%;
height: 100%;
position: absolute;
width: 100%;
height: 100%;
You can also add top: 0and left:0
您还可以添加top: 0和left:0
