强制CSS网格容器填充设备的全屏 [英] force css grid container to fill full screen of device
问题描述
对于单页应用程序，我如何强制CSS网格容器占用设备屏幕的整个宽度和高度？修改后的示例来自Mozilla： Firefox文档
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
.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>
我不确定如何使此代码正常工作。
I'm not sure what to do to get this code to work. Any ideas/suggestions would be appreciated.
推荐答案
如果您利用 width：100vw;
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.
还请注意，有时浏览器等会向其中添加填充和边距。我添加了 * 全局无填充和边距，以便您可以看到不同之处。请记住这一点。
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>
这篇关于强制CSS网格容器填充设备的全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
