0

我最近在使用 CSS 时遇到了一个奇怪的行为，我试图了解发生了什么，但我想我错过了一些关于导航器中渲染器引擎的知识。

代码在 codepen 上：https ://codepen.io/ghivert/pen/mdyEZpe 。
有关信息，代码也在下面：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;display=swap" rel="stylesheet">
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <div class="grid">
      <header>Header</header>
      <nav>Navbar</nav>
      <main>
        <div class="content">Main Content</div>
        <footer>Footer</footer>
      </main>
    </div>
  </body>
</html>

* {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  font-family: Poppins,Helvetica,sans-serif
}

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-areas:
    "navbar header"
    "navbar central";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}

header {
  grid-area: header;
  background: lemonchiffon;
}

nav {
  grid-area: navbar;
  background: blue;
}

main {
  grid-area: central;
  display: grid;
  grid-template-areas:
    "content" "footer";
  grid-template-rows: 1fr auto;
  background: purple;
  overflow: auto;
}

footer {
  grid-area: footer;
  background: red;
}

如果你看一下 codepen，中央网格上的溢出比我预期的要多一点。<main>不完全是内部<div>和 的大小<footer>，它高一些像素。

我发现它来自line-height: 1.15;和 Poppins 字体系列的组合。当我删除 line-height 或 Poppins 时，它按预期工作，在<main>.

你能解释为什么会发生这种行为吗？以避免在未来数小时内对其进行调试。

编辑：

添加图片更清晰：

图片来说明问题

我说的是红色页脚下方的白线。

4

1 回答 1

0

该空间是由grid-template-rows: 1fr auto;in引起的<main>。您正在使用 with auto。在 CSS-Grid 中，grid-template-rows 的值auto意味着：

行/列的大小取决于容器的大小，以及行中项目内容的大小

换句话说，页脚需要知道它的高度，因为网格没有定义它。

通过给页脚一个高度值来修复它。

footer {
  grid-area: footer;
  background: red;
  height: 20px;
}

或者

main {
  grid-area: central;
  display: grid;
  grid-template-areas:
    "content" "footer";
  grid-template-rows: 1fr 20px;
  background: green;
  overflow: auto;
}

当心，使用px，em或vh。它将成为自动的百分比。

CSS 网格中的百分比

是一个非负值，相对于网格容器的块大小。如果网格容器的大小取决于其轨道的大小，则百分比必须被视为自动。

于 2019-12-13T17:03:46.957 回答