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

问题描述

这让我发疯。只是试图用高度和 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 和 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>