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

Question

这让我发疯。只是试图将此网格放入具有高度和 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>

有什么线索吗？

Answer 1

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

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>

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

Scrollbar appears when I want to adapt a grid to the viewport

html

css

grid

viewport

cover