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>

Here's a picture显示了我在macOS上安装的Chrome版本70.0.3538.102（正式版本）（64位）时的渲染错误。

编辑：我已经将grid-template-rows单位指定为vh，而不是%，但是我是still seeing rendering issues, now in both Firefox and 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;
 }

更多详细信息：

Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent（解决方案也适用于Grid）

在Firefox和Chrome上使用CSS网格渲染的方式有所不同

1 个答案: