我应该使用什么网格属性来使网格完美地保持在屏幕内？
Using height: 100vh; on .wrapper调整高度，但引入了滚动条。为了删除不需要的滚动条，我尝试设置body{margin:0;}但我希望在整个网格周围有一个边距，而不产生滚动条。我确信这是一个简单的解决方法，但请帮助我！
代码笔：https://codepen.io/reiallenramos/pen/yzroxe https://codepen.io/reiallenramos/pen/yzroxe
html,
body {
height: 100%;
width: 100%;
}
body {
background-color: lightcyan;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-gap: 8px;
height: 100vh;
}
.wrapper>div {
background-color: #eee;
}
.wrapper>div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-column: 1/2;
grid-row: 1/5;
}
.item2 {
grid-column: 2/3;
grid-row: 1/3;
}
.item3 {
grid-column: 3/5;
grid-row: 1/3;
}
.item4 {
grid-column: 2/4;
grid-row: 3/5;
}
.item5 {
grid-column: 4/5;
grid-row: 3/6;
}
.item6 {
grid-column: 1/3;
grid-row: 5/7;
}
.item7 {
grid-column: 3/4;
grid-row: 5/7;
}
.item8 {
grid-column: 4/5;
grid-row: 6/7;
}
<div class="wrapper">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
</div>
主流浏览器通常会在页面上设置默认边距body元素。通常是 8px，如W3C 推荐 https://www.w3.org/TR/CSS22/sample.html.
因此，在设置时body元素或另一个容器height: 100%，由于存在溢出情况，将呈现垂直滚动条：
100% + 8px > the viewport height
简单的解决方法是用您自己的规则覆盖浏览器的默认规则：
body { margin: 0; }
但是，在这种情况下，您需要主容器周围有间隙。你不需要滚动条。
然后只需更换margin with padding，并使用box-sizing: border-box.
With box-sizing: border-box、内边距和边框（但不包括边距）都被考虑到内容长度中。
body {
margin: 0;
background-color: lightcyan;
}
/* NEW */
* {
box-sizing: border-box;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-gap: 8px;
padding: 8px; /* NEW */
height: 100vh;
}
.wrapper>div {
background-color: #eee;
}
.wrapper>div:nth-child(odd) {
background-color: #ddd;
}
.item1 {
grid-column: 1/2;
grid-row: 1/5;
}
.item2 {
grid-column: 2/3;
grid-row: 1/3;
}
.item3 {
grid-column: 3/5;
grid-row: 1/3;
}
.item4 {
grid-column: 2/4;
grid-row: 3/5;
}
.item5 {
grid-column: 4/5;
grid-row: 3/6;
}
.item6 {
grid-column: 1/3;
grid-row: 5/7;
}
.item7 {
grid-column: 3/4;
grid-row: 5/7;
}
.item8 {
grid-column: 4/5;
grid-row: 6/7;
}
<div class="wrapper">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
