Question

我正在尝试使用Flexbox构建“圣杯”布局。

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

见下文：

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

- - - Full jsFiddle Here - - -

- - - Simplified jsFiddle Here - - -

Answer 1

想出来了！

事实证明与<main>和<body>存在一些CSS冲突，我所要做的就是删除<main>包装器，然后将flex定义直接添加到页面主体。

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

<强> - - - Here's the simplified 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;
}

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

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

1 个答案: