时间戳

首页 > 解决方案 > 为什么这些网格区域重叠？

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

问题描述

脚部区域与导航和主要区域重叠（从包含在“主要”中的部分元素的圆形左下角不可见这一事实可以看出）。主要区域大小设置为自动，部分元素设置为高度 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>

标签： csscss-gridoverlap

解决方案

您在元素上设置了填充。这会增加每个框的大小，因为该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>

更多关于box-sizing这个答案。

推荐阅读