css - 为什么这些网格区域重叠？

Question

footer 区域与导航区域和主要区域重叠(从“main”中包含的部分元素的圆形左下角不可见的事实可以看出)。主区域大小设置为自动，部分元素高度设置为 100%。这是怎么回事？

body {
  margin: 0;
}

.wrapper {
  display: grid;
  height: 100vh;
    grid-template-areas: 
        "header header"
        "nav main"
        "foot foot";
  grid-template-rows: 3rem auto 3rem;
  grid-template-columns: 10rem auto;
  background-color: rgb(10, 2, 29);
}

header {
  grid-area: header;
  padding: 0.5rem;
}

nav {
  grid-area: nav;
  padding: 0.5rem;
}

main {
  grid-area: main;
}

section {
  width: auto;
  height: 100%;
  padding: 0.5rem;
  color: rgb(10, 2, 29);
  background-color: rgb(254, 254, 255);
  border-radius: 0.1rem 0 0 0.1rem;
}

footer {
  grid-area: foot;
  background-color: blue;
  padding: 0.5rem;
}

<div class="wrapper">
  <header>header</header>
  <nav>nav</nav>
  <main>
    <section id="page1">content1</section>
  </main>
  <footer>foot</footer>
</div>
<script src="main.js"></script>

Answer 1

您已在元素上设置了填充。这会增加每个框的大小，因为 box-sizing 属性的默认值为 content。您需要覆盖默认值。

将其添加到您的代码中:

* { box-sizing: border-box }

body {
    margin: 0;
}
.wrapper {
    display: grid;
    height: 100vh;    
    grid-template-areas: 
        "header header"
        "nav main"
        "foot foot";
    grid-template-rows: 3rem auto 3rem;
    grid-template-columns: 10rem auto;
    background-color: rgb(10, 2, 29);
}
header {
    grid-area: header;
    padding: 0.5rem;
}
nav {
    grid-area: nav;
    padding: 0.5rem;
}
main {
    grid-area: main;
}
section {
    width: auto;
    height: 100%;
    padding: 0.5rem;
    color: rgb(10, 2, 29);
    background-color: rgb(254, 254, 255);
    border-radius: 0.1rem 0 0 0.1rem;
    border: 5px dashed red; /* demo */
}
footer {
    grid-area: foot;
    background-color: blue;
    padding: 0.5rem;
}

/* new */
* { box-sizing: border-box; } 

<div class="wrapper">
  <header>header</header>
  <nav>nav</nav>
  <main>
    <section id="page1">content1</section>
  </main>
  <footer>foot</footer>
</div>

有关 this answer 中的 box-sizing 的更多信息.