Flexbox Holy Grail布局：固定标题，固定左导航，流体内容区域，固定右侧边栏

I'm attempting to build the "Holy Grail" layout using Flexbox.

我正在尝试使用Flexbox构建“Holy Grail”布局。

Fixed Header
固定标题
Fixed, Collapsible, Scrollable Left Nav
固定，可折叠，可滚动的左导航
Flexible Content Area
灵活的内容区域
Fixed, Collapsible, Scrollable Right Nav
固定，可折叠，可滚动的右导航

See below:

见下文：

I have everything working, except for the height of the "app" area underneath the header. Right now it's 100vh (100% of the viewport height), but this includes the 64px header.

除了标题下方“app”区域的高度外，我一切正常。现在它是100vh（视口高度的100％），但这包括64px标题。

I attempted calc(100vh - 64px), but that doesn't jive well with flex.

我尝试计算（100vh - 64px），但这与flex不相符。

Here's my basic HTML structure:

这是我的基本HTML结构：

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

And the supporting CSS:

和支持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;
}

- - - Full jsFiddle Here - - -

- - - 全jsFiddle在这里 - - -

- - - Simplified jsFiddle Here - - -

- - - 简化jsFiddle这里 - - -

1 个解决方案

#1

Figured it out!

弄清楚了！

Turns out there were some CSS conflicts with <main> and <body>, and all I had to do was remove the <main> wrapper, then add the flex definitions directly to the page body.

事实证明，与

和存在一些CSS冲突，我所要做的就是删除

包装器，然后将flex定义直接添加到页面主体。

- - - Here's the full working jdFiddle - - -

- - - 这是完整的工作jdFiddle - - -

- - - Here's the simplified jdFiddle - - -

- - - 这是简化的jdFiddle - - -

New HTML Structure:

新的HTML结构：

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

New Supporting CSS:

新的支持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;
}

Feel free to use this as a basis for your applications! Enjoy!

随意使用它作为您的应用程序的基础！请享用！

#1