CSS-сетка рендеринга по-разному в Firefox и Chrome

Question

Я изучаю css-grid и сталкиваюсь с различиями в рендеринге между браузерами (Firefox и Chrome) при использовании областей сетки и строк / столбцов в процентах.Посмотрите мою демонстрацию этой проблемы здесь: https://codepen.io/anon/pen/qQyKNO

См. MVCE, содержащий HTML / CSS ниже:

/* 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>

Вот рисунок , показывающий ошибку рендеринга в моей установке Chrome, Версия 70.0.3538.102 (Официальная сборка) (64-разрядная версия) на macOS.

Редактировать: I 'Мы обновили 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 (content-size)).

Добавьте это в свой код:

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

ИЛИ (проще и, возможно, более стабильно во всех браузерах)

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

Подробнее:

• Работа с CSS heightзначения свойств и процентов
• Chrome / Safari не заполняет 100% высоты родительского элемента Flex (решения также применимы к Grid)