Poppins and Line Height

Question

I encountered a strange behavior recently with CSS, and I'm trying to understand what's happening, but I think I miss some knowledge about the renderer engine in navigators.

The code is on codepen: https://codepen.io/ghivert/pen/mdyEZpe.
For information the code is below too:

<!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;
}

If you take a look at the codepen, the overflow on the central grid takes a little more place than what I expect. The <main> is not exactly the size of the inside <div> and the <footer>, it's some pixels higher.

I figured out that it's coming from the combination of line-height: 1.15; and the Poppins font-family. When I remove line-height or Poppins, it's working as expected, with no extra space on bottom of <main>.

Could you explain why this behavior happens? To avoid debugging it for hours in the future.

Edit:

Add a picture to be clearer:

I'm talking about the white line below the red footer.

Are you asking why is the scroll bar taking up space in your main content div? — MTBthePRO, Dec 13 '19 at 16:23
Just edited the question te improve clarity. I'm talking about white line below footer. — ghivert, Dec 13 '19 at 16:40

MTBthePRO · Answer 1 · 2019-12-13T17:12:58.673

The space is being caused by grid-template-rows: 1fr auto; in <main>. You are using with auto. In CSS-Grid, grid-template-rows value auto means:

The size of the rows/column is determined by the size of the container, and on the size of the content of the items in the row

In other words, the footer needs to know its height because the grid didn't define it.

Fix it by giving footer a height value.

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

OR

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

Beware, to use px, em or vh. Percentage it will become auto.

Percentage in CSS-Grid

Is a non-negative value, relative to the block size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto.

Poppins and Line Height

1 Answers1