当我想使网格适应视口时出现滚动条答案

【问题标题】：Scrollbar appears when I want to adapt a grid to the viewport当我想使网格适应视口时出现滚动条
【发布时间】：2021-06-30 01:00:33
【问题描述】：

这快把我逼疯了。只是试图将这个网格放入具有高度和 vw 值的整个页面中。但是当我在 CSS 上写它时，它会出现滚动条！！！我该如何解决？这是html。这只是一个基本的东西，但我不知道该怎么做！

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr) 0.1fr;
  grid-gap: 10px;
  height: 100vh;
}

.a {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 1 / 4;
  grid-row: 4 / 7;
}

.b {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.c {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

.name {
  grid-column: 1 / 3;
  grid-row: 7 / 7;
}

.contact {
  grid-column: 4 / 6;
  grid-row: 7 / 7;
}

<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="name">
    <p>Name</p>
  </div>
  <div class="contact">
    <p>Contact</p>
  </div>
</div>

有什么线索吗？

【问题讨论】：

标签： html css grid viewport cover

【解决方案1】：

您必须重置html 和body 的保证金。如果您仍想保留填充，可以将其提供给您的 .grid 类，但从高度减少相等的值。

html, 
body {
  margin: 0
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr) 0.1fr;
  grid-gap: 10px;
  height: 96vh;
  padding: 2vh
}

.a {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 1 / 4;
  grid-row: 4 / 7;
}

.b {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.c {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

.name {
  grid-column: 1 / 3;
  grid-row: 7 / 7;
}

.contact {
  grid-column: 4 / 6;
  grid-row: 7 / 7;
}

<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="name">
    <p>Name</p>
  </div>
  <div class="contact">
    <p>Contact</p>
  </div>
</div>

【讨论】：