Flexbox Макет Holy Grail: фиксированный заголовок, фиксированный левый Nav, область содержимого жидкости, исправленная правая боковая панель

Я пытаюсь построить макет "Святой Грааль" с помощью Flexbox.

  • Фиксированный заголовок
  • Исправлено, Складное, прокручиваемое влево Nav
  • Гибкая область содержимого
  • Исправлено, Складное, прокручиваемое право Nav

См. ниже:

введите описание изображения здесь

У меня все работает, за исключением высоты области "app" под заголовком. Сейчас он 100vh (100% высоты видового экрана), но это включает в себя заголовок 64px.

Я попытался вычислить (100vh - 64px), но это не хорошо сгибает flex.

Здесь моя основная структура HTML:

<main>
    <header></header>
    <app>
        <nav>Left Nav</nav>
        <article>Content</article>
        <aside>Right Nav</aside>
    </app>
</main>

И поддерживающий CSS:

main {
    display: flex;
    flex-direction: column;
}

header { 
    z-index: 0;
    flex: 0 0 64px;
    display: flex;
}

app {
    flex: 1 1 100vh;
    display: flex;
}

nav {
    flex: 0 0 256px;
    order: 0;
}

article {
    flex: 1 1 100px;
    order: 1;
}

aside {
    flex: 0 0 256px;
    order: 2;
}

- - - Полный jsFiddle Здесь - - -

- - - Упрощенный jsFiddle Здесь - - -

Ответы

Ответ 1

Выяснилось!

Оказывается, были некоторые конфликты CSS с <main> и <body>, и все, что мне нужно было сделать, это удалить оболочку <main>, а затем добавить определения flex непосредственно в тело страницы.

- - - Здесь полный рабочий jdFiddle - - -

- - - Здесь упрощенный jdFiddle - - -

Новая структура HTML:

<body>
  <header></header>
  <app>
    <nav>Left Nav</nav>
    <article></article>
    <aside>Right Nav</aside>
  </app>
</body>

Новый поддерживающий CSS:

html, body {
    margin: 0;
    height: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
}

header { 
    z-index: 0;
    flex: 0 64px;
    display: flex;
}

app {
    flex: 1;
    display: flex;
}

nav {
    flex: 0 0 256px;
    order: 0;
}

article {
    flex: 1;
    order: 1;
    overflow: auto;
}

aside {
    flex: 0 0 256px;
    order: 2;
}

Не стесняйтесь использовать это в качестве основы для своих приложений! Наслаждайтесь!