Firefox 和 Chrome 上的 css-grid 呈现方式不同

Question

我正在学习 css-grid 并且在使用网格区域和百分比大小的行/列时遇到了跨浏览器（Firefox 和 Chrome）渲染差异。在此处查看我对此问题的演示：https : //codepen.io/anon/pen/qQyKNO

请参阅下面包含 HTML/CSS 的 MVCE：

/* CSS Reset */
html 
{
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:     100%;
}
body { margin: 0; }
.p1  { padding: 1rem; }
img  { display: block; border: 0; width: 100%; height: auto; }

/* General Styles */
.navbar       { background: white; border-bottom: 1px solid black; }
.logo         { background: #212121;}
.sidebar      { background: #212121; color: white; }
.main-content { background: white; }
.colophon     { background: #1c1e1e; color: white; }

/* CSS Grid layout */
@supports (display: grid) 
{
  @media screen and (min-width: 1440px) 
  {
    .site 
    {
      display: grid;
      grid-template-columns: 15% 85%;
      grid-template-rows: 10% 70% 20%;
      grid-template-areas:
        "logo navbar"
        "sidebar main"
        "sidebar footer";
    }

    .logo { grid-area: logo; }
    .navbar { grid-area: navbar; }
    .sidebar { grid-area: sidebar; }
    .main-content { grid-area: main; }
    .colophon { grid-area: footer; }

    }
}

这是相关的 HTML：

<div class="site">
  <nav class="p1 navbar">
    <strong>Project</strong>
    <p><a href="/dashboard/">Portal</a> / Dashboard</p>
    <a href="/faq/" target="_blank">Need Help?</a>
  </nav>

  <div class="p1 logo">
    <img src="https://www.stockvault.net/data/2010/09/20/114878/thumb16.jpg">
  </div>

  <aside class="p1 sidebar">
    <ul>
      <li><a href="/dashboard/">Your Dashboard</a></li>
      <li><a href="/premium/">Premium</a></li>
    </ul>
  </aside>

  <main class="p1 main-content">Lorem ipsum</main>

  <footer class="p1 colophon"><h2>Location:</h2>123 Main St</footer>
</div>

这是一张图片，显示了我在 macOS 上安装 Chrome 版本 70.0.3538.102（官方版本）（64 位）时出现的渲染错误。

编辑：我已将 更新grid-template-rows为由vh单位而不是指定%，但是我仍然看到渲染问题，现在在 Firefox 和 Chrome 中：

.site {
  display: grid;
  grid-template-columns: 15vw 85vw;
  grid-template-rows: 10vh 70vh 20vh;
  grid-template-areas:
        "logo navbar"
        "sidebar main"
        "sidebar footer";
}

Answer 1

如果你要使用百分比，像这样：

.site {
    display: grid;
    grid-template-rows: 10% 70% 20%;
 }

然后你需要给这些行一个参考点。（百分比长度使用父元素的高度/宽度作为参考。如果没有父元素引用，具有百分比长度的元素默认为height: auto（内容大小））。

将此添加到您的代码中：

.site {
    display: grid;
    grid-template-rows: 10% 70% 20%;
    height: 100vh; /* new */
 }

OR（更简单，可能更稳定，跨浏览器）

.site {
    display: grid;
    grid-template-rows: 10vh 70vh 20vh;
 }

更多细节：

• 使用 CSSheight属性和百分比值
• Chrome / Safari 没有填充 100% 的 flex parent 高度（解决方案也适用于 Grid）