相关疑难解决方法(0)

我正在尝试使用Flexbox构建"Holy Grail"布局.

• 固定标题
• 固定,可折叠,可滚动左导航
• 灵活的内容区域
• 固定,可折叠,可滚动的右导航

见下文:

除了标题下方"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;
}

- …