html右侧导航栏固定,html – Flexbox圣杯布局：固定标题,固定左导航,流体内容区域,固定右侧栏...

我试图使用Flexbox构建“圣杯”布局.

>固定头

>固定,可折叠,可滚动左导航

>灵活内容区

>固定,可折叠,可滚动右导航

见下文：

我有一切工作,除了标题下面的“应用程序”区域的高度.现在它是100vh(100％的视口高度),但这包括64px标题.

我尝试了calc(100vh – 64px),但是这并不适合flex.

这是我的基本HTML结构：

Left Nav

Content

Right Nav

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

}